本文详解如何修复文本翻转（character-flip）悬停按钮中因 dom 重构导致单词间距丢失的问题，通过在 javascript 拼接时插入   保留视觉空格，并优化 html 结构与 css 渲染逻辑。

在构建字符级翻转悬停效果（如每个字母向上翻转）时，一个常见却易被忽视的问题是：原始文本中的单词空格在动态生成 结构后意外消失，导致 “This is a text” 变成 “Thisisatext”。根本原因在于——JavaScript 将文本按空格拆分为单词数组后，再用 .join(' ') 拼接，但此时空格被包裹在 和 的 inline 元素之间，而浏览器会合并相邻 inline 元素间的空白符（包括普通空格、换行、制表符），最终渲染时被忽略。

✅ 正确解法是：用  （非断行空格）替代普通空格进行拼接，确保空格作为不可折叠的 HTML 实体被保留：

document.querySelectorAll('.btn-text').forEach(button => {
  const words = button.textContent.trim().split(' ');
  // ✅ 使用   替代 ' '，强制保留单词间隔
  button.innerHTML = '' + 
    words.map(word => 
      '' + word.split('').join('') + ''
    ).join(' ') + 
    '';
});

⚠️ 注意事项：

• 不要使用   或  ，它们语义为排版空格，宽度不固定且可能受字体影响；
• 避免在 内直接写空格（如 ' '），因 CSS 中 display: block 会使空 span 高度为 0，无法占位；
• 若需支持多空格或制表符，建议先用正则规范化空白（如 text.replace(/\s+/g, ' ')），再统一处理；
• SCSS 中 @for $i from 1 through 12 存在硬编码风险，建议改用 :nth-child(n) 或 JS 动态计算子元素数量，提升可维护性。

完整优化后的结构示例（HTML 输出结果）：

  
    This 
    is 
    a 
    text
  

这样，每个单词内部字符独立翻转，单词之间由   稳定分隔，视觉间距完全复原，同时保持 CSS transform 动画的流畅性与语义清晰性。