本文详解如何修复文本翻转（character-flip）悬停按钮中因 dom 重构导致单词间距丢失的问题，通过在 javascript 拼接时插入 保留视觉空格，并优化 html 结构与 css 渲染逻辑。
在构建字符级翻转悬停效果（如每个字母向上翻转）时，一个常见却易被忽视的问题是：原始文本中的单词空格在动态生成 结构后意外消失，导致 “This is a text” 变成 “Thisisatext”。根本原因在于——JavaScript 将文本按空格拆分为单词数组后，再用 .join(' ') 拼接，但此时空格被包裹在 ✅ 正确解法是：用 （非断行空格）替代普通空格进行拼接，确保空格作为不可折叠的 HTML 实体被保留： ⚠️ 注意事项： 完整优化后的结构示例（HTML 输出结果）： 这样，每个单词内部字符独立翻转，单词之间由 稳定分隔，视觉间距完全复原，同时保持 CSS transform 动画的流畅性与语义清晰性。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>';
});
<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>
