如何判断文本是否溢出并处理文本省略（移除溢出内容）

我之前也碰到过一模一样的问题！你现在用的scrollWidth > clientWidth判断方法在绝大多数场景下都能正常工作，但一旦遇到文本被text-overflow: ellipsis截断后，刚好让元素的scrollWidth和clientWidth相等的情况，就会误判为“没有溢出”，这确实挺坑的。

核心问题在于：当你给元素加上text-overflow: ellipsis和overflow: hidden后，元素的scrollWidth会被限制为自身的clientWidth——因为溢出的内容已经被隐藏了，浏览器不会再计算那些被截断部分的宽度，导致两者相等，判断失效。

下面给你两个靠谱的解决思路：

方法一：用隐藏克隆元素对比宽度 #

这个思路很直观：创建一个和目标元素完全一样的克隆，但不给它加省略号样式，让它完整显示所有文本，然后对比克隆元素的实际宽度和原元素的容器宽度。

const isTextOverflowing = (element) => {
  // 克隆目标元素，保留所有文本和基础样式
  const clone = element.cloneNode(true);
  // 移除控制文本省略的CSS类
  clone.classList.remove('clampTextInOneLine');
  // 设置克隆元素样式，确保它不影响页面布局且能完整显示文本
  clone.style.position = 'absolute';
  clone.style.visibility = 'hidden';
  clone.style.whiteSpace = 'nowrap';
  clone.style.overflow = 'visible';
  clone.style.width = 'auto'; // 让克隆元素自适应文本宽度
  
  // 把克隆元素临时添加到DOM中
  document.body.appendChild(clone);
  // 判断克隆元素的宽度是否超过原元素的容器宽度
  const isOverflowing = clone.scrollWidth > element.clientWidth;
  // 用完记得移除克隆元素，避免内存泄漏
  document.body.removeChild(clone);
  
  return isOverflowing;
};

方法二：利用Range API计算文本实际宽度 #

Range API可以精准获取文本内容的实际占据宽度，不用创建额外DOM元素，性能更优一些。

const isTextOverflowing = (element) => {
  // 创建Range对象，选中元素内的所有文本内容
  const range = document.createRange();
  range.selectNodeContents(element);
  // 获取文本内容的实际宽度
  const textWidth = range.getBoundingClientRect().width;
  // 计算元素的可用宽度（减去左右内边距/边框的宽度）
  const elementAvailableWidth = element.clientWidth - element.clientLeft - element.clientRight;
  
  // 对比两者宽度，判断是否溢出
  return textWidth > elementAvailableWidth;
};

额外注意点 #

• 如果你的元素有水平方向的padding或者border，一定要记得在计算可用宽度时把这些值减掉，不然会出现判断偏差。
• 方法一的克隆元素要确保移除所有可能限制文本显示的样式（比如overflow: hidden、text-overflow等），否则克隆元素的宽度也会被限制。

备注：内容来源于stack exchange，提问作者zeena patel