本文详解如何修复按钮文字逐字符翻转悬停时丢失单词间距的问题，通过在 javascript 动态插入 html 时正确添加非换行空格（` `），确保 “this is a text” 不被错误渲染为 “thisisatext”。
在实现基于 CSS 变换的逐字符翻转悬停效果（如 transform: translateY() 配合 transition-delay）时，一个常见但易被忽视的陷阱是：HTML 中连续的 <span> 元素默认以 inline 方式渲染，而浏览器会自动合并相邻文本节点间的空白符（包括空格、换行、制表符）。你的 JS 逻辑将原文本按空格切分为单词数组 ['This', 'is', 'a', 'text']，再对每个单词内部逐字符包裹 <span>，最后用 .join(' ') 拼接——但 ' '（普通空格）在 DOM 解析中不会生成可见空白，尤其当所有子元素均为 display: inline 或 inline-block 时，空格会被完全忽略。
✅ 正确解法是使用 （non-breaking space） 替代普通空格。它是一个 HTML 实体，在渲染时强制保留为一个不可折叠的空白字符，且语义上明确表示“此处需显示空格”。
修改后的 JavaScript 如下：
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>';
});同时，为确保布局稳定与可访问性，建议补充以下 CSS 增强项：
.btn-text {
// 防止因内联元素导致的基线对齐问题
line-height: 1.5;
div {
display: flex;
align-items: center; // 垂直居中对齐所有 span
gap: 0.25em; // 可选：为单词间添加额外弹性间距（现代浏览器支持）
span {
display: inline-block; // 更稳妥地控制尺寸和变换行为
backface-visibility: hidden;
transition: transform 0.25s ease;
transform: translateY(var(--m, 0)) translateZ(0);
@for $i from 1 through 12 {
&:nth-child(#{$i}) {
transition-delay: $i * 0.05s;
}
}
}
}
&:hover {
--m: calc(-1rem);
}
}⚠️ 注意事项：
- 是 HTML 实体，不能在纯文本字符串中直接写成空格；若使用模板字符串或 JSX，需写作 '\u00A0' 或显式插入 。
- 若按钮文本含多空格、制表符或换行，建议先规范化空白：button.textContent.replace(/\s+/g, ' ').trim()。
- 对于国际化项目，注意某些语言（如中文、日文）本身无词间空格，此时应按字符而非单词拆分——需动态判断语言或改用 Array.from(word) 而非 split('')。
最终效果：悬停时每个字母平滑上翻，单词间距清晰保留，“This is a text” 始终正确显示，兼具视觉表现力与语义准确性。
