Как обернуть текст в span и не разбивать слова? - PullRequest
Новая
       33

Как обернуть текст в span и не разбивать слова?

0 голосов
/ 09 апреля 2020

У меня есть небольшой код, который переносит текст в span. Проблема заключается в том, что перенос не учитывает пробелы, чтобы изменить строку и разбить слова в середине.

Текст 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;
    }

1 Ответ

0 голосов
/ 09 апреля 2020

Каждый 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

...