JSFiddle - React, Tailwind, and code Playground

by koenpunt

HTML

<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vel scelerisque neque.</h1>

CSS

h1 {
    display: inline;
    
    /* background: purple; */
       font-family: sans-serif;
    color: #fff;

    /* line-height: 1.5; */
    
    text-align:justify;
}

h1 span {
    display: block;
    padding: 10px;
    background: purple;
}

JavaScript

document.querySelectorAll("h1").forEach(function() 
    {
        var headerContent = $(this).text().split(' ');

        for (var i = 1; i < headerContent.length; i++) 
        {
            headerContent[i] = '<span class="subhead">' + headerContent[i] + '</span>';
        }

        $(this).html(headerContent.join(' '));
    }
);