如何用JavaScript/jQuery获取浏览器自动换行的div首行文本

要获取这个被浏览器自动折行的div的第一行文本，确实有点棘手——毕竟文本本身没有换行符，是浏览器根据容器的宽高样式自动拆分的。不过我们可以借助浏览器的渲染特性来实现，这里分享两种可行的方案：

方法一：使用Range API（高效无额外DOM） #

这种方法利用浏览器的Range对象来检测文本的实际渲染范围，不需要创建额外的DOM元素，性能更优：

function getFirstLineText(element) {
  if (!element || !element.firstChild) return '';
  
  const textNode = element.firstChild;
  const range = document.createRange();
  range.setStart(textNode, 0);
  
  // 目标元素的行高（这里容器height设为20px，刚好是一行的高度）
  const lineHeight = element.offsetHeight;
  
  let endOffset = 1;
  
  // 逐步扩展Range，直到高度超过单行高度
  while (endOffset <= textNode.length) {
    range.setEnd(textNode, endOffset);
    const rect = range.getBoundingClientRect();
    const currentHeight = rect.bottom - rect.top;
    
    // 当高度超过行高时，回退一个字符，得到第一行内容
    if (currentHeight > lineHeight) {
      range.setEnd(textNode, endOffset - 1);
      return range.toString().trim();
    }
    
    endOffset++;
  }
  
  // 如果文本全部能放在一行内，直接返回全部内容
  return textNode.textContent.trim();
}

// 调用示例
const targetElement = document.getElementById('element');
const firstLineContent = getFirstLineText(targetElement);
console.log(firstLineContent);

方法二：使用临时DOM元素（直观易调试） #

这种方法通过创建一个和目标元素样式完全一致的临时容器，逐字符添加文本并监测高度变化，逻辑更直观：

function getFirstLineText(element) {
  if (!element || !element.textContent) return '';
  
  const fullText = element.textContent;
  // 创建临时元素，复制影响换行的关键样式
  const tempContainer = document.createElement('div');
  const computedStyle = getComputedStyle(element);
  
  tempContainer.style.width = element.style.width;
  tempContainer.style.font = computedStyle.font;
  tempContainer.style.display = 'inline-block';
  tempContainer.style.position = 'absolute';
  tempContainer.style.visibility = 'hidden'; // 隐藏不干扰页面布局
  document.body.appendChild(tempContainer);
  
  const singleLineHeight = element.offsetHeight;
  let firstLine = '';
  
  for (let i = 0; i < fullText.length; i++) {
    tempContainer.textContent += fullText[i];
    
    // 当临时容器高度超过单行高度时，停止并截取之前的内容
    if (tempContainer.offsetHeight > singleLineHeight) {
      firstLine = tempContainer.textContent.slice(0, -1).trim();
      break;
    }
    
    // 如果循环到末尾仍未超过高度，说明所有文本都在一行
    if (i === fullText.length - 1) {
      firstLine = tempContainer.textContent.trim();
    }
  }
  
  document.body.removeChild(tempContainer);
  return firstLine;
}

// 调用示例
const targetElement = document.getElementById('element');
const firstLineContent = getFirstLineText(targetElement);
console.log(firstLineContent);

注意事项 #

• 两种方法都依赖目标元素的渲染样式，所以要确保容器的width、font-size、font-family、line-height等影响换行的样式是稳定的；
• 如果你的元素行高不是直接等于容器高度，可以用getComputedStyle(element).lineHeight来获取准确的行高值替换代码中的singleLineHeight。

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