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: "Tooltip",
  props: {
    text: { type: String, 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 lang="scss">
.tooltip-wrap {
  height: 26; // 必须要有高度设置（高度可根据实际情况调整），因为tooltip的显示条件是通过高度来判断的
}
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all; //英文数字折行
}
p {
  width: 100%;
  margin: 0;
}
</style>

vue文件中引用

import Tooltip from "@/components/Tooltip"

 <div id="el_col_behind_newLong" style="width:90%">
      <Tooltip :text='`${item.ip + `【${item.country}-${item.province}-${item.city}】`}`' />
 </div>

参考：网络文件。

标签：ev,weight,悬浮,text,一行,default,文本
来源： https://blog.csdn.net/dmr123456/article/details/121165654