时间戳

首页 > 解决方案 > 如何在跨度中换行而不破坏单词？

html - 如何在跨度中换行而不破坏单词？

问题描述

我有一个小代码，可以将文本包装在 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;
    }

标签： htmltextwrapperbreakword

解决方案

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

推荐阅读