快捷導(dǎo)航

一文學(xué)會用JS判斷文字是否被省略(ellipsis)

更新時間：2023年08月02日 10:14:53 作者：嘉琪coder

這篇文章主要給大家介紹了用JS如何判斷文字被省略ellipsis,CSS幫我們搞定了省略,但是JS并不知道文本什么時候被省略了,所以我們得通過JS來計算,接下來,我將介紹2種方法來實現(xiàn)JS計算省略,需要的朋友可以參考下

createRange

我發(fā)現(xiàn)Element-plus表格組件已經(jīng)實現(xiàn)了這個功能，所以就先來學(xué)習(xí)一下它的源碼。

源碼地址：element-plus/packages/components/table/src/table-body/events-helper.ts at dev · element-plus/element-plus · GitHub

// 僅僅粘貼相關(guān)的
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函數(shù)
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 中的一個方法，用于創(chuàng)建一個 Range 對象，表示文檔中的一個范圍。Range 對象通常用于選擇文檔中的一部分內(nèi)容，然后對其進(jìn)行操作。

它可以：

設(shè)置選中文本范圍：可以使用 document.createRange() 方法創(chuàng)建一個 Range 對象，并使用 setStart() 和 setEnd() 方法設(shè)置選中文本的起始和結(jié)束位置。
插入新元素：可以使用 document.createRange() 方法創(chuàng)建一個 Range 對象，并使用 insertNode() 方法將新元素插入到文檔中的指定位置。
獲取特定元素的位置：可以使用 document.createRange() 方法創(chuàng)建一個 Range 對象，并使用 getBoundingClientRect() 方法獲取元素在文檔中的位置和大小信息。

這邊element就是使用range對象的getBoundingClientRect獲取到元素的寬高，同時因為得到的寬高值有很多位的小數(shù)，所以element-plus做了一個判斷，如果小數(shù)值小于0.001就舍棄小數(shù)部分。

接下來，就讓我們進(jìn)行一下復(fù)刻吧，可以通過調(diào)整盒子的寬度，在頁面中看到是否有省略號的判斷。

注意這里，我們需要區(qū)分clientWidth和offsetWidth，因為我們給了box加了1px的邊框，所以offsetWidth = 1 * 2 + 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, pTop, pBottom } = getPadding(box)
  const horizontalPadding = pLeft + pRight
  const verticalPadding = pTop + pBottom
  if (rangeWidth + horizontalPadding > box.clientWidth) {
    result.textContent = '存在省略號'
  } else {
    result.textContent = '容器寬度足夠，沒有省略號了'
  }
}

創(chuàng)建一個div來獲取模擬寬度

我們可以還可以通過創(chuàng)建一個幾乎相同的div來獲取沒有overflow:hidden時元素的實際寬度。

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);
}

示例如下：