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

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

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

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

⚠️ 注意事项：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

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

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

<button class="btn-text">
  <div>
    <span>T</span><span>h</span><span>i</span><span>s</span> 
    <span>i</span><span>s</span> 
    <span>a</span> 
    <span>t</span><span>e</span><span>x</span><span>t</span>
  </div>
</button>

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