当所有字母周围都带有<span>时，如何使文本响应？

问题描述

那么，如何在<h2>中放置任何文本而又不会像这样：

有关动画的一些随机文本

但更像这样：

的一些随机文本 动画

(function() {
  // Wrap every letter in a span
  var textwrapper = document.querySelector('.ml');
  textwrapper.innerHTML = textwrapper.textContent.replace(/\S/g,"<span class='letter'>$&</span>");

  anime.timeline({
      loop: false
    })
    .add({
      targets: '.ml .letter',translateX: [40,0],translateZ: 0,opacity: [0,1],easing: "eaSEOutExpo",duration: 2000,delay: (el,i) => 200 + 10 * i
    }).add({
      targets: '.ml .letter',// translateX: [0,-30],// opacity: [1,easing: "easeInExpo",duration: 1100,i) => 100 + 30 * i
    });
})();

.ml {
  overflow: hidden;
}

.ml .letter {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<h2 class="ml">some random text for the animation</h2>

解决方法

您可以尝试将div包裹在每个单词周围，这样它就不会在每个字母处折断

const words = textWrapper.innerText.split(' ');
textWrapper.innerHTML = ""


words.forEach(word => {
    textWrapper.innerHTML += `<div style="display: inline-block"> 
         ${word.replace(/\S/g,"<span class='letter'>$&</span>")}
    </div>`
})