JavaScript疑难：窗口缩放时如何正确组合字母成完整单词

方案一：纯CSS快速修复（无需修改DOM结构） #

如果字母span按单词分组在某个父容器内，直接给单词容器添加以下CSS：

.word-container {
  white-space: nowrap;
  display: inline-block;
  margin: 0 0.1em; /* 保留单词间的空格间距 */
}

整个单词会作为不可拆分的单元，窗口缩放时仅在单词之间换行，不会拆分字母。

如果没有现成的单词容器，可给所有字母span设置display: inline，同时调整父容器的换行规则：

.letter-span {
  display: inline;
}
.parent-container {
  word-break: normal;
  white-space: normal;
}

注意：这种方法会保留字母span的基础样式，但如果span依赖inline-block实现动画或特殊布局，不适用此方案。

方案二：JS重构DOM结构（从根源解决） #

通过脚本将同一单词的字母span包裹到统一容器中，彻底避免字母拆分：

示例代码： #

// 假设所有字母span的类名为"letter"
const letterSpans = document.querySelectorAll('.letter');
let currentWordContainer = null;

letterSpans.forEach(span => {
  // 判断当前span是否为空格节点（可根据实际结构调整判断逻辑）
  const isSpace = span.textContent.trim() === '';
  
  if (isSpace) {
    // 保留空格并移除原空格span
    const spaceNode = document.createTextNode(' ');
    span.parentNode.insertBefore(spaceNode, span);
    span.remove();
    currentWordContainer = null;
  } else {
    if (!currentWordContainer) {
      // 创建新的单词容器
      currentWordContainer = document.createElement('span');
      currentWordContainer.classList.add('word-wrap');
      span.parentNode.insertBefore(currentWordContainer, span);
    }
    // 将字母span移入单词容器
    currentWordContainer.appendChild(span);
  }
});

// 给单词容器添加防换行样式（也可通过外部CSS定义）
document.querySelectorAll('.word-wrap').forEach(container => {
  container.style.whiteSpace = 'nowrap';
  container.style.display = 'inline-block';
  container.style.marginRight = '0.1em';
});

关键说明： #

• 若结构中是文本空格而非空格span，需调整空格判断逻辑；
• 单词容器的样式建议通过外部CSS定义，便于维护；
• 若包含标点符号，需优化分组逻辑，确保标点与对应单词在同一容器内。

补充提示 #

如果字母span用于逐字动画等效果，包裹单词容器后不会影响单个span的动画逻辑，仅通过外层容器约束换行行为。

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