Vue封装文字超出一行，省略号显示，鼠标悬浮展示全部

效果图：

为大家提供了两个版本，一个是Vue+iview，一个是Vue+elementui，代码如下：

一、 Vue+iview

1）NormalTextTooltipol.vue组件代码 

<template>
  <div class="tooltip-wrap">
    <Tooltip
      ref="tlp"
      :content="text"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
      theme="light"
    >
      <p class="over-flow" @mouseenter="visibilityChange($event)">{{ text }}</p>
    </Tooltip>
  </div>
</template>

<script>
export default {
  name: "tooltipWrap",
  props: {
    text: { default: "" }, // 字符内容
    placement: { type: String, default: "top-start" },
    className: { type: String, default: "text" } // class
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    };
  },
  methods: {
    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度
      const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
      if (ev_weight > content_weight) {
        // 文本宽度 > 实际内容宽度  =》内容溢出
        this.tooltipFlag = true;
      } else {
        // 否则为不溢出
        this.tooltipFlag = false;
      }
    }
  }
};
</script>

<style>
.ivu-tooltip-inner {
  max-width: none !important;
}
</style>

<style scoped>
.ivu-tooltip {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.tooltip-wrap {
  height: 18px;
}
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
p {
  width: 100%;
  margin: 0;
}
</style>

2）引用组件并使用，代码如下：

<template>
  <div style="width:20px">
    <NormalTextTooltipol :text="info" />
  </div>
</template>

<script>
import NormalTextTooltipol from "../../../components/NormalTextTooltipol";
export default {
  components: {
    NormalTextTooltipol
  },
  data() {
    return {
        info: "我是很长很长的测试数据数据数据数据"
    };
  },
  created() {},
  methods: {}
};
</script>

二、 Vue+elementUi

1）NormalTextTooltipol.vue组件代码 

<template>
  <div class="tooltip-wrap">
    <el-tooltip
      ref="tlp"
      :content="text"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
    >
        <p class="over-flow" @mouseenter="visibilityChange($event)">{{ text }}</p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: "tooltipWrap",
  props: {
    text: { default: "" }, // 字符内容
    placement: { type: String, default: "top-start" },
    className: { type: String, default: "text" } // class
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    };
  },
  methods: {
    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth; // 文本的实际宽度
      const content_weight = this.$refs.tlp.$el.parentNode.clientWidth; // 文本容器宽度(父节点)
      if (ev_weight > content_weight) {
        // 文本宽度 > 实际内容宽度  =》内容溢出
        this.tooltipFlag = true; 
      } else {
        // 否则为不溢出
        this.tooltipFlag = false;
      }
    }
  }
};
</script>

<style scoped>
.tooltip-wrap {
  height: 18px;
}
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
p {
  width: 100%;
  margin: 0;
}
</style>

2）引入和使用方法，与第一个例子相同，大家可以参照，在此就不在赘述