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

Question

那么如何将任何文本放入 <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,0],
      easing: "easeInExpo",
      duration: 1100,
      delay: (el, 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>

Answer 1

您可以尝试将 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>`
})

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

How do you get text responsive when all the letters have a <span> around them?

javascript

html

responsive-design

anime.js