.ellipsis { // 堆代码 duidaima.com overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }3行css搞定,但是问题来了:如果我们想要当文本被省略的时候,「也就是当文本超出指定的宽度后,鼠标悬浮在文本上面才展示popper」,应该怎么实现呢?CSS帮我们搞定了省略,但是JS并不知道文本什么时候被省略了,所以我们得通过JS来计算。接下来,我将介绍几种方法来实现JS计算省略。
// 仅仅粘贴相关的 const cellChild = (event.target as HTMLElement).querySelector('.cell') const range = document.createRange() range.setStart(cellChild, 0) range.setEnd(cellChild, cellChild.childNodes.length) let rangeWidth = range.getBoundingClientRect().width let rangeHeight = range.getBoundingClientRect().height /** detail: https://github.com/element-plus/element-plus/issues/10790 * What went wrong? * UI > Browser > Zoom, In Blink/WebKit, getBoundingClientRect() sometimes returns inexact values, probably due to lost precision during internal calculations. In the example above: * - Expected: 188 * - Actual: 188.00000762939453 */ const offsetWidth = rangeWidth - Math.floor(rangeWidth) if (offsetWidth < 0.001) { rangeWidth = Math.floor(rangeWidth) } const offsetHeight = rangeHeight - Math.floor(rangeHeight) if (offsetHeight < 0.001) { rangeHeight = Math.floor(rangeHeight) } const { top, left, right, bottom } = getPadding(cellChild) // 见下方 const horizontalPadding = left + right const verticalPadding = top + bottom if ( rangeWidth + horizontalPadding > cellChild.offsetWidth || rangeHeight + verticalPadding > cellChild.offsetHeight || cellChild.scrollWidth > cellChild.offsetWidth ) { createTablePopper( parent?.refs.tableWrapper, cell, cell.innerText || cell.textContent, nextZIndex, tooltipOptions ) } // 上面代码17行中的getPadding函数 const getPadding = (el: HTMLElement) => { const style = window.getComputedStyle(el, null) const paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0 const paddingRight = Number.parseInt(style.paddingRight, 10) || 0 const paddingTop = Number.parseInt(style.paddingTop, 10) || 0 const paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0 return { left: paddingLeft, right: paddingRight, top: paddingTop, bottom: paddingBottom, } }document.createRange() 是 JavaScript 中的一个方法,用于创建一个 Range 对象,表示文档中的一个范围。Range 对象通常用于选择文档中的一部分内容,然后对其进行操作。
3.获取特定元素的位置:可以使用 document.createRange() 方法创建一个 Range 对象,并使用 getBoundingClientRect() 方法获取元素在文档中的位置和大小信息。
<div class="ellipsis box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> <style> .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box { border: 1px solid gray; padding: 10px; } </style>注意这里,我们需要区分clientWidth和offsetWidth,因为我们现在给了box加了1px的边框,所以offsetWidth = 1 * 2 (左右两边的border宽度) + clientWidth,所以我们这边使用clientWidth来代表box的实际宽度。
const checkEllipsis = () => { const range = document.createRange(); range.setStart(box, 0) range.setEnd(box, box.childNodes.length) let rangeWidth = range.getBoundingClientRect().width let rangeHeight = range.getBoundingClientRect().height const contentWidth = rangeWidth - Math.floor(rangeWidth) const { pLeft, pRight } = getPadding(box) const horizontalPadding = pLeft + pRight if (rangeWidth + horizontalPadding > box.clientWidth) { result.textContent = '存在省略号' } else { result.textContent = '容器宽度足够,没有省略号了' } }这种方法div里面放的元素和样式是不受限制的,比如html这样写还是能够正确计算的。
<div class="ellipsis box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="font-size: large;">hello world</span> <span style="letter-spacing: 20px;">hello world</span> </div>2.创建一个div来获取模拟宽度
<div class="ellipsis box"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> <style> .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box { border: 1px solid gray; padding: 10px; } </style> const checkEllipsis = () => { const elementWidth = box.clientWidth; const tempElement = document.createElement('div'); const style = window.getComputedStyle(box, null) tempElement.style.cssText = ` position: absolute; top: -9999px; left: -9999px; white-space: nowrap; padding-left:${style.paddingLeft}; padding-right:${style.paddingRight}; font-size: ${style.fontSize}; font-family: ${style.fontFamily}; font-weight: ${style.fontWeight}; letter-spacing: ${style.letterSpacing}; `; tempElement.textContent = box.textContent; document.body.appendChild(tempElement); if (tempElement.clientWidth >= elementWidth) { result.textContent = '存在省略号' } else { result.textContent = '容器宽度足够,没有省略号了' } document.body.removeChild(tempElement); }当box元素里面存在多个dom元素的时候,还得进行一个递归创建dom,或者也可以试试cloneNode(true)来试试克隆。
<div class="ellipsis box"> <span class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. </span> </div> <style> .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .box { border: 1px solid gray; padding: 10px; } </style>通过上面对css和html做的处理,我们可以实现让box元素里面的文字进行ellipisis,同时由于并没有 对span.content进行任何overflow的处理,所以该 span 的offsetWidth还是保持不变。
const checkEllipsis = () => { const { pLeft, pRight } = getPadding(box) const horizontalPadding = pLeft + pRight if (box.clientWidth <= content.offsetWidth+horizontalPadding ) { result.textContent = '存在省略号' } else { result.textContent = '容器宽度足够,没有省略号了' } }同样,只要满足外层元素是block,内层元素是inline的话,里面的dom元素其实是随便放的
<div class="ellipsis box"> <span class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. <span style="font-size: large;"> hello world </span> <span style="letter-spacing: 20px;"> hello world </span> </span> </div>