如何实现带空格保留的按钮文字翻转悬停效果

聖光之護 2025-12-26 00:00:00 次阅读

本文详解如何修复按钮文字逐字符翻转悬停时丢失单词间距的问题，通过在 javascript 动态插入 html 时正确添加非换行空格（` `），确保 “this is a text” 不被错误渲染为 “thisisatext”。

在实现基于 CSS 变换的逐字符翻转悬停效果（如 transform: translateY() 配合 transition-delay）时，一个常见但易被忽视的陷阱是：HTML 中连续的元素默认以 inline 方式渲染，而浏览器会自动合并相邻文本节点间的空白符（包括空格、换行、制表符）。你的 JS 逻辑将原文本按空格切分为单词数组 ['This', 'is', 'a', 'text']，再对每个单词内部逐字符包裹，最后用 .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 = '' + 
    words.map(word => 
      '' + word.split('').join('') + ''
    ).join(' ') + 
    '';
});

同时，为确保布局稳定与可访问性，建议补充以下 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” 始终正确显示，兼具视觉表现力与语义准确性。