JSFiddle - React, Tailwind, and code Playground

HTML

<div id="myText">
    Elit. Libero voluptatibus hac sociis magnam! Voluptatum, numquam ultricies, aliquid, laudantium pulvinar praesent nisl, sociis. Autem integer sociis! Praesent ultricies, id tempora nec nunc auctor aliquam dolores morbi sollicitudin iaculis. Fames cillum harum felis semper potenti autem pariatur, augue incidunt corrupti repudiandae optio consequatur? Eos eiusmod accusantium harum? Ultricies pulvinar hymenaeos? Torquent auctor nisi, temporibus veritatis! Ipsum ornare vitae pede dolore hic dictumst pariatur diamlorem placerat rutrum dis ac, nemo minima scelerisque fugit tenetur reiciendis metus, proin tenetur eiusmod porro, ante ad venenatis ducimus, bibendum mollit facere bibendum augue tempore quaerat? Praesent quibusdam necessitatibus ac, aenean mattis magni, nascetur, cumque assumenda sem, esse sem eaque amet felis! Exercitationem. Inceptos suspendisse officia error, officia ut nemo hac. Omnis aspernatur urna voluptatibus ducimus mollit vestibulum massa sapiente commodo litora maiores, quis do, quod senectus curae? Expedita anim, fames suspendisse delectus itaque dolorum. Fringilla sequi maecenas voluptatibus, rutrum! Expedita consectetuer scelerisque mollit mollitia? Id laboriosam? Ridiculus lorem, morbi facilis? Ea sunt vero temporibus! Inceptos. Quaerat? Morbi blandit pharetra. Sunt numquam nisi proident tellus, habitant? Impedit rerum fusce. Nibh ridiculus, litora lectus tempor lacinia, viverra consequatur, sollicitudin erat mollitia quasi ullamco similique, animi? Ex? Maecenas porro? Error neque quisque quis dignissim quos, tellus eaque venenatis vulputate sint magnis quam, aptent, rhoncus. Voluptas et excepturi omnis a fames eros mollit hendrerit molestias nec semper corrupti risus aspernatur illo qui, porttitor risus, incidunt accusantium omnis et quam explicabo? Officia aenean, nemo inventore tincidunt magna odio maiores? Optio sed perspiciatis interdum, interdum tincidunt class quisque posuere rutrum cras natus, diam anim...

JavaScript

function wrapLines($container) {
    // get the text from the conatiner
    var text = $container.text();
    
    // split the text into words
    var words = text.split(' ');
    
    // wrap each word in a span and add it to a tmp
    var tmp = '';
    $.each(words, function(i, word) {
        tmp += '<span>' + word + '</span> ';
    });
    
    // remove the text from the container, and replace it with the wrapped words
    $container.text('').append($(tmp));
    
    // prepare the offset variable and tmp
    var tmp = '';
    var top = null;
    $container.find('span').each(function(index, word) {
        $word = $(word);
        // if this is the first iteration
        if (top == null) {
            // set the top
            top = $word.position().top;
            // open the first line
            tmp = '<span class="line">';
        }
        
        // if this is a new line (top is bigger then the previous word)
        if (top < $word.position().top) {
            // close the previous line and start a new one
            tmp += '</span><span class="line">';
            // change the top
            top = $word.position().top;            
        }
        
        // add the content of the word node + a space
        tmp += $word.text() + ' ';
    });
    // close the last line
    tmp += '</span>';
    
    // remove the content of the conatiner, and replace it with the wrapped lines
    $container.html($(tmp));    
}

// when the DOM is ready (you may want to do this on resize as well)
$(document).ready(function() {
    // run the wrap function
    wrapLines($('#myText'));
    
    // color each line (just for fun)
    $('.line').each(function(i, line) {
        var color = 'rgb('
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ','
            + (Math.floor(Math.random() * 256)) + ')'; 
        $(line).css('color', color);
    });
});