一文学会用JS判断文字是否被省略(ellipsis)

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

// 仅仅粘贴相关的
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,
  }
}

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 = '容器宽度足够，没有省略号了'
  }
}

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