求助：JS旋转文字动画无法识别空格，多单词显示异常

我正在修改一个文字切换动画，想用双词短语替代单个单词展示，但动画不识别空格，导致短语挤在一起（比如显示成twowords而非two words）。尝试使用非断空格时，空格直接被当作代码显示出来。

原JS代码如下：

var words = document.getElementsByClassName('word');
var wordArray = [];
var currentWord = 0;

words[currentWord].style.opacity = 1;
for (var i = 0; i < words.length; i++) {
  splitLetters(words[i]);
}


function changeWord() {
  var cw = wordArray[currentWord];
  var nw = currentWord == words.length-1 ? wordArray[0] : wordArray[currentWord+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentWord = (currentWord == wordArray.length-1) ? 0 : currentWord+1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
        cw[i].className = 'letter out';
  }, i*80);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
        nw[i].className = 'letter in';
  }, 340+(i*80));
}

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

changeWord();
setInterval(changeWord, 2000);
delay(7000);

解决方案 #

问题核心是：空格字符被包装进<span class="letter">后，默认没有宽度，视觉上无法显示。以下两种方式均可修复：

方法1：给空格对应的span添加样式

修改splitLetters函数识别空格，给其添加特殊类名，再用CSS设置宽度：

1. 更新JS中的splitLetters函数：

function splitLetters(word) {
  var content = word.innerHTML;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    var char = content.charAt(i);
    // 判断是否为空格，单独处理
    if (char === ' ') {
      letter.className = 'letter space';
      letter.innerHTML = '&nbsp;'; // 用非断空格确保宽度
    } else {
      letter.className = 'letter';
      letter.innerHTML = char;
    }
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

2. 在CSS中添加空格样式：

.letter.space {
  display: inline-block;
  width: 0.5em; /* 可根据需求调整空格宽度 */
}

方法2：直接处理空格的HTML实体

若不想额外加CSS，可直接在HTML的word元素中用 替代空格，再修改JS确保实体被正确解析：

function splitLetters(word) {
  // 用textContent获取原始文本，避免HTML实体被转义
  var content = word.textContent;
  word.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i) === ' ' ? '&nbsp;' : content.charAt(i);
    word.appendChild(letter);
    letters.push(letter);
  }
  
  wordArray.push(letters);
}

两种修改都能让双词短语中的空格正常显示，且不影响原有动画逻辑。

内容的提问来源于stack exchange，提问作者cousinJary