前端超出最大宽度，显示...，鼠标hover显示浮层，显示全部

 子组件

<template>
  <el-tooltip class="tooltip" :disabled="isShowTooltip" :content="text" placement="bottom" effect="light">
    <div class="container" @mouseover="onMouseOver(refName)">
      <span class="ellipsis" :ref="refName">{{ text }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  data() {
    return {
      isShowTooltip: true,
    }
  },
  props: {
    text: {
      type: String,
      required: true,
    },
    refName: {
      type: String,
      required: true,
    },
  },
  methods: {
    onMouseOver(refName) {
      console.log(refName, this.$refs[refName].parentNode, this.$refs[refName])
      const parentWidth = this.$refs[refName].parentNode.offsetWidth
      const contentWidth = this.$refs[refName].offsetWidth
      // 判断是否开启 tooltip 功能，如果溢出显示省略号，则子元素的宽度势必短于父元素的宽度
      console.log(parentWidth, contentWidth)
      if (contentWidth == parentWidth) {
        this.isShowTooltip = false
      } else {
        this.isShowTooltip = true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
 /* 显示的行数：一行 */
.ellipsis {
  display: inline-block;
  max-width: 100%; /* 定宽 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 显示的行数：两行 */
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2; /* 显示的行数 */
  // overflow: hidden;
  // text-overflow: ellipsis;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100%; /* 定宽 */
  overflow: hidden;
}
</style>

父组件引用

 <toopitnormal ref="reftoopit2" :text="item2.pointName" :refName="refName2"></toopitnormal>