如何在跨度中换行而不破坏单词？答案

【问题标题】：How to Wrap text in span and not breaking words?如何在跨度中换行而不破坏单词？
【发布时间】：2020-04-09 04:18:53
【问题描述】：

我有一个小代码，可以将文本包装在 span 中。问题是换行没有考虑空格换行，中间断字。

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

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

【问题讨论】：

标签： html text wrapper break word

【解决方案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 来实现它

【讨论】：

这个解决方案似乎不适用于我的情况。 .text 是页面不同部分的标题，现在所有跨度文本都组合在一起并显示在每个 .text 位置。
我假设你只有一个.text 元素。我编辑了答案。
感谢这个解决方案，现在它有点工作了。但是因为每个跨度都有一个动画，所以字母的动画由于双跨度而乘以 2。有什么解决方法吗？
而不是动画span 动画.word span。或者在我的脚本中将带有word 类的标签从span 更改为其他一些元素，例如div。