按钮文字悬停翻转效果丢失空格问题求助

你遇到的空格消失问题，根源在于JS代码中用纯文本空格连接处理后的单词，但在flex布局的容器内，纯文本空格无法被正确渲染。

修改方案 #

将单词之间的纯文本空格替换为包含空格的<span>元素，让空格作为flex容器内的独立项被渲染：

修改后的JS代码

document.querySelectorAll('.btn-text').forEach(button => {
  const words = button.textContent.trim().split(' ');
  button.innerHTML = '<div>' + words.reduce((acc, word, idx) => {
    // 将单个单词拆分为字符span
    const charSpans = '<span>' + word.split('').join('</span><span>') + '</span>';
    // 除最后一个单词外，添加空格span
    return acc + charSpans + (idx !== words.length - 1 ? '<span>&nbsp;</span>' : '');
  }, '') + '</div>';
});

可选样式调整（无需改动也可正常显示）

如果需要自定义空格宽度，可给空格span添加类名并配置样式：

.word-space {
  width: 0.6em; // 根据需求调整宽度
}

对应JS中修改空格部分为：<span class="word-space">&nbsp;</span>

这样修改后，按钮文字的空格就能正常显示，同时不影响单个字符的悬停翻转效果。

内容的提问来源于stack exchange，提问作者Erwin van Ekeren