如何从HTML页面获取CSS截断后实际显示的带省略号文本？

• 红色箭头标识CSS多行文本截断效果，效果本身符合预期
• 绿色箭头标识需要获取的截断后实际显示文本，示例值为'Lorem ipsum dolor sit amet, consectetur adipisicing elit. L...'

在React中使用document.querySelector(element).textContent、innerText或ref.current读取元素内容时，只能获取到元素的完整原始文本，无法直接拿到页面上实际渲染的、带省略号的截断后文本。

问题复现代码：

console.log(document.querySelector('.overflow').textContent);
console.log(document.querySelector('.overflow').innerText);

.overflow {
  width: 100px;
  height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}

<div class="overflow">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor natus quia temporibus! Delectus illo inventore officiis, perspiciatis provident rem sunt totam voluptatum? Deserunt dolores, voluptate. Dolor eius enim non praesentium?</div>

浏览器没有提供直接读取截断后显示文本的原生API，可以通过二分法逐段校验文本是否超出容器边界，计算出容器能容纳的最大文本长度，最终拼接得到带省略号的显示文本，逻辑不会改动原DOM结构，也不会造成页面闪烁。

可直接复用的工具函数：

/**
 * 获取元素内实际显示的截断后文本
 * @param {HTMLElement} el 目标DOM节点
 * @returns {string} 实际渲染的文本内容
 */
function getVisibleTruncatedText(el) {
  const originalText = el.textContent;
  const totalLength = originalText.length;
  const containerMaxHeight = el.clientHeight;

  // 创建和目标元素排版完全一致的隐藏测试节点，避免操作原元素
  const testNode = el.cloneNode(false);
  testNode.style.cssText = `
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    width: ${el.clientWidth}px;
    height: auto;
    overflow: visible;
  `;
  // 复制排版相关的计算样式，兼容-webkit-line-clamp多行截断场景
  const targetStyle = window.getComputedStyle(el);
  const styleProps = ['font', 'lineHeight', 'padding', 'wordBreak', 'letterSpacing', 'webkitLineClamp', 'display', 'webkitBoxOrient'];
  styleProps.forEach(prop => {
    testNode.style[prop] = targetStyle[prop];
  });
  document.body.appendChild(testNode);

  // 二分查找最大可容纳字符数
  let left = 0;
  let right = totalLength;
  while (right - left > 1) {
    const mid = Math.floor((left + right) / 2);
    testNode.textContent = originalText.slice(0, mid);
    if (testNode.scrollHeight <= containerMaxHeight) {
      left = mid;
    } else {
      right = mid;
    }
  }

  document.body.removeChild(testNode);
  // 全量文本可完整显示时直接返回原内容，否则补全省略号
  return left === totalLength ? originalText : `${originalText.slice(0, left - 1)}...`;
}

// 调用示例
const targetEl = document.querySelector('.overflow');
console.log(getVisibleTruncatedText(targetEl));

React场景下，等DOM挂载完成后（比如在useEffect回调、按钮点击事件中），把ref绑定的DOM节点传入上述函数，即可拿到实际显示的截断文本。

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