HTML/CSS/JS单页应用：多行文本逐字符显示的换行优化问题

方案一：通过CSS样式同步强制排版一致 #

给幽灵文本和显示文本元素设置完全相同的排版样式，同时启用white-space: pre-wrap，让两者的换行逻辑完全对齐：

<div class="text-container">
  <div class="ghost-text">这里是完整的目标文本，包含需要自动换行的长内容</div>
  <div class="display-text"></div>
</div>

.text-container {
  position: relative;
  width: 300px; /* 按需设置宽度 */
}
.ghost-text, .display-text {
  font-family: "微软雅黑", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  width: 100%;
}
.ghost-text {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.display-text {
  position: relative;
  z-index: 1;
  background: #fff;
}

JS逐字符添加内容时无需额外处理换行，CSS会保证显示文本的换行位置和幽灵文本完全一致。

方案二：预计算换行位置，手动同步换行 #

先让幽灵文本渲染完成，遍历所有字符记录换行的起始位置，显示时在对应位置插入换行符：

const ghostEl = document.querySelector('.ghost-text');
const displayEl = document.querySelector('.display-text');
const fullText = ghostEl.textContent;
const lineBreakIndexes = [];
const range = document.createRange();

// 遍历字符，记录换行位置
for (let i = 1; i < fullText.length; i++) {
  range.setStart(ghostEl.firstChild, i - 1);
  range.setEnd(ghostEl.firstChild, i);
  const prevTop = range.getBoundingClientRect().top;
  
  range.setStart(ghostEl.firstChild, i);
  range.setEnd(ghostEl.firstChild, i + 1);
  const currentTop = range.getBoundingClientRect().top;
  
  if (currentTop > prevTop) {
    lineBreakIndexes.push(i);
  }
}

// 逐字符显示
let currentIdx = 0;
const timer = setInterval(() => {
  if (currentIdx >= fullText.length) {
    clearInterval(timer);
    return;
  }
  let char = fullText[currentIdx];
  // 到达换行位置时插入换行符
  if (lineBreakIndexes.includes(currentIdx)) {
    char = '\n' + char;
  }
  displayEl.textContent += char;
  currentIdx++;
}, 60);

注意：必须保证幽灵文本和显示文本的所有排版样式完全一致，否则位置计算会出错。

方案三：用span包裹字符，精准匹配位置 #

将幽灵文本的每个字符用span包裹，克隆这些span到显示容器中，逐个设置可见性：

<div class="text-container">
  <div class="ghost-text" id="ghostText"></div>
  <div class="display-text" id="displayText"></div>
</div>

.text-container {
  position: relative;
  width: 300px;
}
.ghost-text, .display-text {
  font-family: "微软雅黑", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 12px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.ghost-text span, .display-text span {
  display: inline-block;
}
.ghost-text {
  visibility: hidden;
}
.display-text span {
  visibility: hidden;
}
.display-text span.visible {
  visibility: visible;
}

const fullText = '这里是完整的目标文本，包含需要自动换行的长内容';
const ghostEl = document.getElementById('ghostText');
const displayEl = document.getElementById('displayText');

// 给幽灵文本和显示文本生成带span的字符
fullText.split('').forEach(char => {
  const ghostSpan = document.createElement('span');
  ghostSpan.textContent = char;
  ghostEl.appendChild(ghostSpan);
  
  const displaySpan = ghostSpan.cloneNode(true);
  displayEl.appendChild(displaySpan);
});

// 逐个显示字符
let currentIdx = 0;
const timer = setInterval(() => {
  if (currentIdx >= fullText.length) {
    clearInterval(timer);
    return;
  }
  displayEl.children[currentIdx].classList.add('visible');
  currentIdx++;
}, 60);

这种方法是精度最高的，每个字符的位置完全继承幽灵文本的布局，不会出现换行错位。

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