【js】判断文本是否溢出

需求：单行文本超出显示省略号，划过该文本时使用tooltip显示全部文本。

问题：由于数据是动态的，有时会很长，有时又比较短不会超出。如果一直保持显示tooltip就很不美观。

优化：超出文本时显示tooltip，不超出则不显示。

首先要判断文本是否溢出

/**
 * 判断是否文本溢出
 * @param e 事件对象
 * @returns  返回true为未溢出  false溢出
 */
export const isBeyond = (e: any) => {
  const ev = window.event || e	// 浏览器兼容，最好写一下
  const textRange = (el: any) => {
    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
}

使用

<el-tooltip :content="detailData?.category" :disabled="disabled">
   <span @mouseenter="handleMouse($event)">
      {{ detailData?.category }}
   </span>
</el-tooltip>

let disabled = ref(true)
const handleMouse = (e: any) => {
   disabled.value = isBeyond(e);
 };

以上是用于elementplus的，以下是2023_08_30更新用于a-tooltip的，由于a-tooltip底下没有那么多子节点，无法再用createRange去判断，用scrollWidth去拿到实际文本长度，跟clientWidth文本可视宽度作比较

export const isBeyond = (e: any) => {
	const ev = window.event || e
	const textContent = ev.target 
	const clientW = textContent.clientWidth
	const scrollW = textContent.scrollWidth
	return scrollW > clientW		// true为溢出  false为不溢出
}

<a-tooltip placement="topLeft" :visible="isOpen">
	<template #title>{{ item?.value }}</template>
    <span 
    	class="flex-1 overflow-ellipsis whitespace-nowrap overflow-hidden" 
    	@mouseenter="handleEnter($event)" 
    	@mouseleave="isOpen = false"
   	>
   		{{ item?.value }}
	</span>
</a-tooltip>

let isOpen = ref(false)
const handleEnter = (e: any) => {
	isOpen.value = isBeyond (e)
}

切记切记，判断文本溢出之前一定要使用单行文件溢出显示省略号的css，并且如果是a-tooltip，要加在a-tooltip内部要溢出隐藏的span上，不然scrollWidth和clientWidth会一直为0

2024-3-7更新，如果上面不行，试试下面这个

this.isToolTip = e.target.clientWidth >= e.target.scrollWidth

还有可能是高度

this.isToolTip = e.target.clientHeight >= e.target.scrollHeight