如何在jQuery中检测并移除.Name元素的溢出文本？

嘿，我完全懂你的痛点——overflow: hidden; text-overflow: ellipsis; white-space: nowrap;这套样式确实能让文本看起来“截断”了，但实际上只是把溢出部分藏在了视线之外，DOM里的原始文本一点没少。要真正移除那些溢出的内容，咱们可以分两步来搞：先判断元素有没有文本溢出，再精准截断到刚好能放下的长度。

1. 先判断：文本到底有没有溢出？ #

判断溢出其实很简单，只需要对比元素的两个宽度属性：

• scrollWidth：元素内容的实际总宽度（包括那些被隐藏的溢出部分）
• clientWidth：元素在页面上显示的可见宽度

如果scrollWidth > clientWidth，就说明文本确实溢出了。写个小函数就能搞定：

function hasOverflowed(element) {
  return element.scrollWidth > element.clientWidth;
}

// 拿到你的.Name元素
const nameEl = document.querySelector('.Name');
if (hasOverflowed(nameEl)) {
  // 有溢出，接下来处理截断
}

2. 再处理：真正移除溢出文本 #

接下来就是把多余的文本砍掉，这里有两种实用的方法，按需选就行：

方法一：逐步缩减（简单好理解） #

适合文本长度不算特别长的场景，思路就是从原始文本末尾逐个删字符，每次删完检查是否还溢出，直到刚好能放下为止：

function truncateTextToFit(element) {
  if (!hasOverflowed(element)) return;

  let originalText = element.textContent;
  let trimmedText = originalText;

  // 一点点砍字符，直到不溢出
  while (hasOverflowed(element) && trimmedText.length > 0) {
    trimmedText = trimmedText.slice(0, -1);
    element.textContent = trimmedText;
  }

  // 要是想保留省略号，可以加这一段
  // if (trimmedText !== originalText) {
  //   element.textContent = trimmedText + '...';
  // }
}

// 调用处理你的.Name元素
truncateTextToFit(nameEl);

方法二：二分法（高效省时间） #

如果你的文本特别长，逐步删字符效率就低了，这时候用二分法能快速找到刚好能放下的最大文本长度，速度快很多：

function truncateWithBinarySearch(element) {
  if (!hasOverflowed(element)) return;

  const originalText = element.textContent;
  let low = 0;
  let high = originalText.length;
  let maxVisibleLength = 0;

  // 二分查找最大可显示长度
  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    element.textContent = originalText.slice(0, mid);

    if (hasOverflowed(element)) {
      // 当前长度还是溢出，得再短点
      high = mid - 1;
    } else {
      // 当前长度能放下，试试更长的
      maxVisibleLength = mid;
      low = mid + 1;
    }
  }

  // 设置最终的截断文本
  element.textContent = originalText.slice(0, maxVisibleLength);
  
  // 可选：加省略号的话，记得再检查一次（省略号也占宽度）
  // if (maxVisibleLength < originalText.length) {
  //   // 先加省略号再检查，要是溢出就再砍一个字符
  //   element.textContent += '...';
  //   while (hasOverflowed(element)) {
  //     element.textContent = element.textContent.slice(0, -2) + '...';
  //   }
  // }
}

// 调用处理
truncateWithBinarySearch(nameEl);

几个要注意的小细节 #

• 一定要等元素样式加载完成后再执行这些代码，比如把代码放在DOMContentLoaded事件回调里，或者元素渲染完成后调用，不然宽度计算会不准。
• 元素的内边距、边框这些都会影响clientWidth，不过这个属性已经自动把这些算进去了，不用额外调整。
• 要是加省略号，记得最后再检查一次是否溢出——毕竟省略号也占宽度，可能需要多砍一两个字符才能刚好放下。

内容的提问来源于stack exchange，提问作者Will