如何用JavaScript获取div截断后的完整文本及未显示内容？

当然可以实现！不过得绕个小弯——浏览器本身不会直接告诉你“哪些内容被截断了”，但我们可以通过一些DOM技巧轻松拿到完整文本，甚至定位到第一个没显示的单词或句子。

先解决最简单的：获取完整的最后一句 #

如果你的<div>里本来就包含了完整文本（比如你示例里的情况），那直接用textContent就能拿到所有内容，根本不用管显示状态：

const truncatedDiv = document.getElementById('truncatedText');
// 获取完整文本
const fullText = truncatedDiv.textContent;
// 拆分句子（按句号+空格分割，可根据实际文本调整规则）
const sentences = fullText.split(/\. /);
// 最后一句要补回句号
const lastFullSentence = sentences.at(-1) + '.';

console.log('完整的最后一句:', lastFullSentence); // 输出 "Third sentence."

这里要注意区分textContent和innerText：textContent会返回元素里的所有文本（不管是否显示），而innerText只返回浏览器渲染后实际显示的内容，别用混了！

进阶：找到第一个未显示的单词 #

如果想知道“哪部分内容开始被截断”，我们可以利用DOM的位置检测API来实现。核心思路是：逐个检查文本的位置是否超出容器的可视范围。

方法1：用临时元素测试单词位置 #

这个方法兼容性好，而且逻辑直观：

function getFirstHiddenWord(container) {
  const containerRect = container.getBoundingClientRect();
  const fullWords = container.textContent.trim().split(/\s+/);
  
  // 创建一个和容器样式一致的临时元素，用来测试单词位置
  const testElement = document.createElement('span');
  testElement.style.cssText = `
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    font: ${getComputedStyle(container).font};
  `;
  document.body.appendChild(testElement);
  
  let accumulatedText = '';
  for (const word of fullWords) {
    const testText = accumulatedText ? `${accumulatedText} ${word}` : word;
    testElement.textContent = testText;
    const testRect = testElement.getBoundingClientRect();
    
    // 检查是否超出容器的垂直范围（你的示例是垂直截断，若水平截断则检查right）
    if (testRect.bottom > containerRect.bottom) {
      document.body.removeChild(testElement);
      return word;
    }
    accumulatedText = testText;
  }
  
  document.body.removeChild(testElement);
  return null; // 没有内容被截断
}

// 调用示例
const firstHidden = getFirstHiddenWord(truncatedDiv);
console.log('第一个未显示的单词:', firstHidden);

方法2：直接遍历文本节点的位置矩形 #

如果你不想创建临时元素，可以用getClientRects()直接获取每个文本片段的位置：

function findFirstHiddenContent(container) {
  const containerRect = container.getBoundingClientRect();
  const textNode = container.firstChild;
  
  if (!textNode || textNode.nodeType !== Node.TEXT_NODE) return null;
  
  const fullText = textNode.textContent;
  const charRects = textNode.getClientRects();
  
  for (let i = 0; i < charRects.length; i++) {
    const rect = charRects[i];
    // 检查当前字符是否超出容器底部
    if (rect.bottom > containerRect.bottom) {
      // 找到这个位置对应的单词起始点
      const wordStartIndex = fullText.lastIndexOf(' ', i) + 1;
      return fullText.slice(wordStartIndex);
    }
  }
  
  return null;
}

// 调用示例
const hiddenContent = findFirstHiddenContent(truncatedDiv);
console.log('从这里开始被截断:', hiddenContent);

注意事项 #

• 确保临时元素的样式（字体、字号、行高）和原容器一致，否则位置测试会不准。
• getClientRects()在不同浏览器的表现略有差异，尤其是处理换行文本时，建议多测试。
• 如果容器里嵌套了其他元素（比如<span>、<b>），需要递归遍历所有文本节点才能准确检测。

内容的提问来源于stack exchange，提问作者br.julien