Перенос каждого слова и каждой буквы в каждое слово jQuery

Question

Представьте, что у вас есть строка текста. Каждая буква в этой строке должна получить случайный шрифт из массива.

Для этого я заключил все буквы в span и произвольно произвел это семейство шрифтов.

Проблема с этим подходом - перенос слов. Теперь, когда предложение обрывается, у меня есть перенос букв, где отдельные буквы переходят в следующую строку.

Чтобы исправить это, я хочу также обернуть каждое слово в диапазоне и применить word-wrap к этому диапазону.

Итак, каждое отдельное слово должно иметь интервал. Каждая отдельная буква в этом слове также должна иметь интервал.

Мне действительно нужна помощь, ниже пример выводит все буквы * слова. Как это исправить?

var elem = $('.curiosa-type');

    elem.each(function( i ) {

        var currentElem = $(this);
        var words = currentElem.text().split(" ");
        var fonts = ['&#39Times&#39', '&#39Arial&#39'];
        currentElem.empty();

        $.each(words, function (i, el) {


            currentElem.append('<span class="word">' + el + '</span>');

            var characters = currentElem.text().split("");

            console.log(characters);

                $.each(characters, function (i, el) {

                    var rand = fonts[Math.floor(Math.random() * fonts.length)];

                    currentElem.append("<span style='font-family:" + rand + "'>" + el + "</span");
                    // check 4 white space
                    if(el.indexOf(' ') >= 0){
                        //console.log(el);
                        currentElem.append('<span class="spacer"></span>');

                    }

                });


        });





    });

Answer 1

Я внес некоторые изменения в ваш код, вы опустошили currentElem , а затем прочитали его текст (конечно, возвращался пустой). Я создаю контейнер слова (div) перед добавлением его в DOM, а затем добавляю все это в DOM, когда это будет сделано.

var elem = $('.curiosa-type');
elem.each(function( i ) {
    var currentElem = $(this);
    var words = currentElem.text().split(" ");
    var fonts = ['&#39Times&#39', '&#39Arial&#39'];
    currentElem.empty();
    $.each(words, function (i, el) {
        console.log(words);
        // currentElem.append('<span class="word">' + el + '</span>'); //doesnt need it
        var characters = el.split('');
        var $div = $('<div>'); // create jQuery Element on fly so we can append to it even when it isn't in the DOM yet
        console.log(characters);
        $.each(characters, function (i, el) {
            var rand = fonts[Math.floor(Math.random() * fonts.length)];
            $div.append("<span style='font-family:" + rand + "'>" + el + "</span");
            // check 4 white space
            if(el.indexOf(' ') >= 0){
                $div.append('<span class="spacer"></span>');
            }
        });
        currentElem.append($div); // append our jQuery Element o the current ".curiosa-type" element
    });
});

Вывод:

Answer 2

• 1000 заворачивать. При этом каждое слово получает произвольно сгенерированный шрифт, и слова могут разбиваться на новые строки, если не хватает места.

Я не вижу причин, по которым каждая буква находится в уникальном диапазоне - который загружает много html без видимой причины.

var words = $("p").text().split(" ");
var fonts = ['courier','sans-serif', 'verdana'];
var color = ['red','green', 'blue'];
$("p").empty();
$.each(words, function(i, v) {
		var rand_font = fonts[Math.floor(Math.random() * fonts.length)];
    var rand_color = color[Math.floor(Math.random() * color.length)];
    $("p").append($("<span style=\"color: "+rand_color+"; font-family:'"+rand_font+"'\">"+v+"</span>"));
});

span {
  word-wrap: break-word;
  padding-right: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>