仅在“空格”处换行，将单词分解成每个字符的类

Question

我的Javascript文本动画需要将每个字符的单词分解为<span>类，并且在自动换行后无法正常工作。因为单词在任何地方都中断，所以我希望它们仅在“空格”处中断。如何从JS和CSS执行此操作。

enter image description here

这是我的JS CSS和HTML的完整代码

<h1 class="rks1">A rose is a woody perennial flowering plant of the genus Rosa, in the family Rosaceae, or the flower it bears. There are over three hundred species and thousands of cultivars. They form a group of plants  </h1>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<style>
.rks1 {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

.rks1 .letter {
  display: inline-block;
  line-height: 1em;
}
</style>

<script>

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

anime.timeline({loop: true})
  .add({
    targets: '.rks1 .letter',
    scale: [3.5,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 450,
    delay: (el, i) => 50*i
  }).add({
    targets: '.ml2',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 500
  });
</script>

Answer 1

对于找到的每个“单词”，也将每个单词也用一个跨度包装，并设置其样式，使其不会包装。例如：

.word {
  white-space: nowrap;
}