JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

HTML

<section>
<span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
    <span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
    <span>
Lorem ipsum dolor sit amet, in luctus, at eros nec turpis, malesuada massa vel purus nonummy, lorem quis neque.
</span>
<span>
Neque ac, ut nunc dui mattis sollicitudin arcu, sed sollicitudin scelerisque. 
</span>
<span>
Praesent sit urna ipsum, tortor integer elit in convallis pulvinar mauris.  
</span>
</section>

CSS

section{
        width:400px;
        float:left;
        font:14px;
    }
    .first-word { 
        font-style:italic;
    }

JavaScript

$('span').each(function() {
        var word = $(this).html();
        var index = word.indexOf(' ');
        if(index == -1) {
            index = word.length;
        }
        $(this).html('<span class="first-word">' + word.substring(0, index) + '</span><br/>' + word.substring(index, word.length));
    });