如何在 span 中换行而不打断单词？

Question

我有一个小代码可以将文本换行。问题是换行没有考虑空格来换行和中间断字。

跨度文本用于独立动画字母的函数，这就是内联块的原因。

JS:

        $('.text').html(function (i, html) {
            var chars = $.trim(html).split("");
            return '<span>' + chars.join('</span><span>') + '</span>';
        });

CSS:

    .text span {
        display: inline-block;
        min-width: 15px;
    }

Answer 1

每个 inline-block 都被视为自己的单词。为了使单词粘在一起，您可以将每个单词包装在另一个 span 中，例如：

$('.text').each((i, e) => {
  const element = $(e);
  element.html(element.text().split(' ').map(word => {
    const letters = (word + ' ').split('').map(char => '<span>' + char + '</span>');
    return '<span class="word">' + letters.join('') + '</span>';
  }).join(''));
});

.text .word {
  display: inline-block;
}

或者，如果您只需要字母之间的空格，您可以使用 letter-spacing 和 word-spacing

来实现

如何在 span 中换行而不打断单词？

How to Wrap text in span and not breaking words?

html

text

word

break

wrapper