如何在HTML文档中实现段落文本隔行镜像（Boustrophedon）

要实现段落文本的隔行水平镜像，核心难点在于浏览器自动换行的“行”并非DOM元素，无法直接用CSS选择。下面是可行的实现步骤：

步骤1：将段落拆分为独立的行元素 #

通过JavaScript把段落的每一行文本包裹成<span>元素，让视觉上的行变成可被CSS选择的DOM节点：

<!-- 目标段落 -->
<p id="boustrophedon">这是一段用于测试的长文本，当内容长度超过容器宽度时会自动换行。我们需要让它实现隔行镜像的效果，也就是奇数行正常显示，偶数行水平翻转。</p>

function splitParagraphIntoLines(para) {
  // 创建隐藏的测量容器，复制原段落样式保证行拆分准确
  const measureContainer = document.createElement('div');
  measureContainer.style.cssText = `
    visibility: hidden;
    position: absolute;
    width: ${para.offsetWidth}px;
    font: ${window.getComputedStyle(para).font};
    white-space: nowrap;
  `;
  document.body.appendChild(measureContainer);

  const fullText = para.textContent;
  const lines = [];
  let currentLine = '';

  // 逐字符添加，通过容器高度变化判断行拆分点
  for (const char of fullText) {
    measureContainer.textContent = currentLine + char;
    if (measureContainer.offsetHeight > para.offsetHeight / (para.scrollHeight / para.offsetHeight)) {
      lines.push(currentLine);
      currentLine = char;
    } else {
      currentLine += char;
    }
  }
  if (currentLine) lines.push(currentLine);

  // 替换原段落内容为拆分后的行元素
  para.innerHTML = lines.map(line => `<span class="boustro-line">${line}</span>`).join('');
  document.body.removeChild(measureContainer);
}

// 执行拆分
const targetPara = document.getElementById('boustrophedon');
splitParagraphIntoLines(targetPara);

步骤2：用CSS实现隔行镜像 #

通过:nth-child(even)选择偶数行，添加水平翻转样式，并调整对齐方式保证阅读连贯性：

#boustrophedon {
  line-height: 1.6; /* 调整行间距提升可读性 */
}

.boustro-line {
  display: block; /* 让每个行元素独占一行 */
}

.boustro-line:nth-child(even) {
  transform: scaleX(-1); /* 水平镜像 */
  text-align: right; /* 镜像后右对齐，保持阅读起始位置正确 */
}

注意事项 #

• 若段落容器宽度或内容动态变化，需要重新调用splitParagraphIntoLines函数更新行元素
• 测量容器必须严格复制原段落的字体、宽度等样式，否则行拆分结果会不准确
• 镜像后的行设置text-align: right是关键，否则文本起始位置会偏离，影响阅读体验

内容的提问来源于stack exchange，提问作者copypaster number 18644263