如何按行拆分HTML P标签中自动换行的内容（无换行符）

浏览器对

标签的自动换行是渲染层面的行为，DOM本身不会记录每行的内容，需要通过模拟渲染+位置检测的方式来获取每行文本，具体实现如下：

核心思路 #

利用元素的offsetTop属性判断换行：同一行内的文本，添加到元素中时offsetTop不会变化；当文本超出宽度换行后，offsetTop会改变，以此作为换行的判断依据。

实现代码 #

function getParagraphLines(pElement) {
  // 克隆目标元素，避免干扰原页面布局
  const clone = pElement.cloneNode(true);
  // 设置克隆元素样式：绝对定位+隐藏，保留原换行规则
  clone.style.position = 'absolute';
  clone.style.visibility = 'hidden';
  clone.style.whiteSpace = 'normal';
  document.body.appendChild(clone);

  const lines = [];
  const fullText = clone.textContent.trim();
  let currentLineText = '';
  let lastOffsetTop = null;

  // 逐个字符遍历文本（如需按单词拆分，可改为 split(' ') 遍历单词）
  for (const char of fullText) {
    clone.textContent = currentLineText + char;
    const currentOffsetTop = clone.offsetTop;

    if (lastOffsetTop !== null && currentOffsetTop !== lastOffsetTop) {
      // 检测到换行，记录上一行内容
      lines.push(currentLineText.trim());
      currentLineText = char;
    } else {
      currentLineText += char;
    }
    lastOffsetTop = currentOffsetTop;
  }
  // 添加最后一行内容
  if (currentLineText) {
    lines.push(currentLineText.trim());
  }

  // 清理临时克隆元素
  document.body.removeChild(clone);
  return lines;
}

// 使用示例
const targetP = document.querySelector('p');
const lineContents = getParagraphLines(targetP);
console.log(lineContents); // 输出每行内容组成的数组

注意事项 #

• 确保克隆元素和原

  的样式完全一致（宽度、字体、内边距等），否则换行位置会出现偏差。

• 该方法仅适用于纯文本的

  标签，若

  内包含子元素（如、图片），需要额外处理。

• 如果需要按单词拆分而不是字符，可将文本拆分为单词数组后遍历，注意处理空格和连续空白字符。

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