滚动揭示文字动画场景下，如何实现文本整词换行而非词内断行？

嘿，我仔细看了你的代码和问题，终于找到问题根源啦！你加的那些word-break、overflow-wrap属性之所以没效果，核心原因是你把每个字符都拆成了独立的inline-block span元素——在浏览器眼里，这些单个字符的span都是独立的“内联块级单元”，它根本不会把它们当成一个完整的单词，自然就会在任意字符之间换行，完全忽略单词边界。

解决方案：调整文本拆分逻辑，先按单词分组，再拆字符 #

我们只需要修改splitText函数，先把文本按单词拆分，给每个单词套一个“不换行容器”，再在容器内部拆分单个字符做动画。这样既保留了字符级的动画效果，又能保证整个单词不会被拆断。

1. 修改splitText函数

function splitText(element) {
  const text = element.textContent.trim();
  element.textContent = "";
  const outerWrapper = document.createElement("div");
  outerWrapper.style.width = "100%";
  outerWrapper.style.display = "block";

  // 用正则拆分文本，保留空格（包括多个空格）作为独立项
  const words = text.split(/(\s+)/);

  words.forEach(word => {
    if (word.trim() === "") {
      // 处理空格：直接添加空格容器，保证间距正确
      const spaceWrapper = document.createElement("span");
      spaceWrapper.textContent = word;
      spaceWrapper.style.display = "inline-block";
      outerWrapper.appendChild(spaceWrapper);
      return;
    }

    // 给每个单词套一个nowrap容器，强制单词不拆断
    const wordWrapper = document.createElement("span");
    wordWrapper.style.whiteSpace = "nowrap";
    wordWrapper.style.display = "inline-block";

    // 在单词内部拆分单个字符，保留原动画逻辑
    [...word].forEach(char => {
      const span = document.createElement("span");
      span.textContent = char === " " ? "\u00A0" : char;
      span.style.display = "inline-block";
      wordWrapper.appendChild(span);
    });

    outerWrapper.appendChild(wordWrapper);
  });

  element.appendChild(outerWrapper);
  // 返回所有字符span，供动画逻辑使用
  return Array.from(outerWrapper.querySelectorAll("span span"));
}

2. 简化CSS的换行属性

原来的一堆换行属性可以简化，因为现在单词有了nowrap容器，只需要保证外层的段落正常处理换行即可：

section p {
  font-size: clamp(1.2rem, 5vw, 9rem);
  white-space: pre-line; /* 保留段落换行，仅在单词/空格处换行 */
  hyphens: none; /* 不需要连字符，因为我们要整词换行 */
  /* 去掉原来的word-break、overflow-wrap等属性，现在不需要了 */
}

为什么这样改能生效？ #

• 每个单词被white-space: nowrap的容器包裹，浏览器会强制整个单词作为一个整体，只能在单词与单词之间（或空格处）换行，彻底避免词内断行。
• 字符拆分的逻辑完全保留，所以你原来的滚动揭示动画（按字符切换颜色）完全不受影响，依然能正常工作。
• 空格被单独处理，保证单词之间的间距和原文本一致，不会出现布局错乱。

额外注意点 #

• 你的Lenis类是dummy实现，不影响这个问题的修复，不用修改。
• 确保section和p元素的宽度设置合理，不要给它们加奇怪的inline或inline-block属性，保持块级元素的正常布局逻辑。

备注：内容来源于stack exchange，提问作者Rafi rizqullah ramadhan