JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bob">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque neque elit, sagittis et scelerisque vitae, porta porttitor erat. Nunc tristique hendrerit convallis. Vivamus viverra, orci eu eleifend luctus, ipsum ante volutpat neque, in mattis turpis risus at ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin nec gravida tellus. Vestibulum porta pretium neque, id tempus nisl faucibus non.</div>

CSS

#bob {
    background: red;
}
#bob div {
    background: blue;  
    margin-bottom: 1px;
}

JavaScript

Element.implement({
    linify : function(tag){  // type of element to serve as 'rows'
        tag = tag || 'div';  // element type defaults to div
        var text = this.get('text');  // get the original text
        this.set('html', '&nbsp;');  // add a space to measure line height
        var height = this.getSize().y;  // save line height
        this.set('text', '');  // zero it out
        var words = text.split(/\s+/g);  // break it into words
        var row = new Element(tag);  // create the initial 'row'
        this.adopt(row);  // append it
        while(words.length) {
            var word = words.shift();  // get the next word
            var saved = row.get('text'); // save the text in case we need to replace it
            row.appendText(' ' + word);  // add it to the row
            var h = this.getSize().y;  // get the new height
            if(h > height) {  // if the new height is greater than the last saved height
                row.set('text', saved);  // replace the last saved text
                row = new Element(tag);  // create a new row and reset the reference
                this.adopt(row);  // add it to the dom
                row.appendText(word);  // write the word to it, omitting the space
                height = this.getSize().y;  // update the last saved height
            };
        };
    }
});
$('bob').linify();