JSFiddle - React, Tailwind, and code Playground

by atomizer

HTML

<div class="fixed">
    <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
    <h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h3>
</div>

CSS

.fixed {
    width: 250px;
    border: 2px solid gray;
}
.fixed h3 {
    font-family: Verdana,Arial,sans-serif;
    font-size: 16px;
    line-height: 25px;
    margin: 20px;
}
.fixed span { outline: 2px solid green; }

JavaScript

$(function(){
    $h = $('.fixed').find('h3');
    $h.each(function(i,e){
        var txt = $(e).text();
        $th = $('<h3 />').prependTo($(e).parent());
        var lh = $(e).text('X').height();
        $(e).text('');
        while (txt.length > 0) {
            $th.text($th.text() + txt[0]);
            txt = txt.slice(1);
            if (($th.height() > lh) || (txt.length <= 0)) {
                var shc = $th.text().split(' ');
                var ph = shc.slice(0,-1).join(' ')+' ';
                if (txt.length <= 0) { ph += shc.pop(); }
                $('<span />').text(ph).appendTo($(e));
                $th.text(shc.pop());
            }
        }
        $th.remove();
    })
});