【js】判断文本是否溢出-Toy模板网

这篇具有很好参考价值的文章主要介绍了【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文章来源地址https://www.toymoban.com/news/detail-586657.html

到了这里，关于【js】判断文本是否溢出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！