JSFiddle - React, Tailwind, and code Playground

HTML

<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentuam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felisemper.</p>

<div class="debug-log">
    DEBUG:
</div>

CSS

p {
    margin-bottom: 20px;
}

JavaScript

var node = $('p')[0].firstChild, text = node.nodeValue, previousHeight = 0, fragment = document.createDocumentFragment(), parentNode = node.parentNode, currentTextNode = document.createTextNode(), currentHeight, newText;

fragment.appendChild(currentTextNode);
fragment.appendChild(node.cloneNode());
parentNode.replaceChild(fragment, node);


for(var i = 0; i <= text.length; i++){
    newText = document.createTextNode(text.substr(0, i));
    parentNode.replaceChild(newText, currentTextNode);
    currentTextNode = newText;
    currentHeight = getTextNodeHeight(newText);
    
    
    if(previousHeight == 0){
        previousHeight = currentHeight;
    }
    
    if(previousHeight != currentHeight){
        previousHeight = currentHeight;
        $('.debug-log').append("<pre>New line achieved with height (" + currentHeight + ") at: " + currentTextNode.nodeValue + '</pre>');
    }
}
parentNode.removeChild(currentTextNode);


function getTextNodeHeight(textNode) {
    var height = 0;
    if (document.createRange) {
        var range = document.createRange();
        range.selectNodeContents(textNode);
        if (range.getBoundingClientRect) {
            var rect = range.getBoundingClientRect();
            if (rect) {
                height = rect.bottom - rect.top;
            }
        }
    }
    return height;
}