vue3检查文本是否溢出容器

1、使用element-plus气泡提升

2、封装js，判断文本是否溢出

// 检查文本是否溢出容器
export const isBeyond = (e) => {
    const ev = window.event || e	// 浏览器兼容，最好写一下
    const textRange = (el) => {
      const textContent = el
      const targetW = textContent.getBoundingClientRect().width
      const range = document.createRange()
      range.setStart(textContent, 0)
      range.setEnd(textContent, textContent.childNodes.length)
      const rangeWidth = range.getBoundingClientRect().width
      return rangeWidth > targetW
    }
    return !textRange(ev.target)	
  }

3、在项目中如何使用

<el-tooltip :content="item.tableNames" placement="top" :disabled="disabled">
 <span class="font-sm text-black-shallow font-weight-400 ellipsis"     
   @mouseenter="handleMouse($event)">{{ item.tableNames }}</span>
</el-tooltip>

// js部分
const disabled = ref(true) // 检测文字是否溢出
const handleMouse = (e) => {
    disabled.value = isBeyond(e);
}

// 定义ellipsis的css样式，设置容器的大小
.ellipsis {
    display: inline-block;
    white-space: nowrap;
    width: 300px;
    overflow: hidden;
     text-overflow: ellipsis;
}