仅在 "Space" 处换行每个字符将单词拆分为 <span> class

Question

我的 Javascript 文本动画需要为每个字符将单词分成 <span> class，并且在此之后自动换行无法正常工作。因为单词在任何地方都会中断，所以我希望它们只在 "space" 处中断。我怎样才能从 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"，将每个单词也包装在一个范围内，并设置样式使其不包装。例如

.word {
  white-space: nowrap;
}

参见：https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

示例：

// Wrap every letter in a span
var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, function(m) {
  return `<span class="word">`
    + m.replace(/\S/g, "<span class='letter'>$&</span>")
    + `</span>`;
});

anime.timeline({loop: false})
  .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
  });

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

.rks1 .letter {
display: inline-block;
line-height: 1em;
}

.word {
background-color: #CFF;
white-space: nowrap;
}

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

<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>

仅在 "Space" 处换行每个字符将单词拆分为 <span> class

Word wrap at only "Space" After break word into <span> class for each charactor

html

javascript

css

word-wrap

仅在 "Space" 处换行 每个字符将单词拆分为 <span> class

Word wrap at only "Space" After break word into <span> class for each charactor

html

javascript

css

word-wrap

仅在 "Space" 处换行每个字符将单词拆分为 <span> class