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

【问题标题】：How do you get text responsive when all the letters have a <span> around them?当所有字母周围都有 <span> 时，如何获得文本响应？
【发布时间】：2020-10-16 16:10:08
【问题描述】：

那么如何在<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>

【问题讨论】：

注意：我确实稍微更改了您的脚本以在末尾添加缺少的})()。你的问题没有问这个问题，所以我认为这是一个复制/粘贴错误。您可能想要增加文本大小或添加更多文本以强制文本以 sn-p 的默认宽度换行。

标签： javascript html responsive-design anime.js

【解决方案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>`
})

【讨论】：