js判断文本是否溢出

开发中经常遇到文本过长的时候 不得不使用一个汽泡样式来展示被隐藏的数据
这时候就需要判断文本是否超出被隐藏了 直接上代码

---

单文本超出隐藏

.container {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

多行文本

.text-container { 
  width: 200px; 
  height: 60px; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3; 
  text-overflow: ellipsis; 
} 

/**
 * 判断是否文本溢出
 * @param e 事件对象
 * @returns  返回true为未溢出  false溢出
 */
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)	// target可以保证当前划过的dom节点一直保持是:el-tooltip__trigger
}