JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="width: 300px; height: 100px; border: 1px solid #ccc;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis risus vel mi placerat ut bibendum dui tempus. In dictum quam eu sem condimentum elementum. Cras id urna eget turpis feugiat porttitor. In hac habitasse platea dictumst. Cras tincidunt risus id sapien sagittis feugiat interdum orci adipiscing. Sed venenatis neque nec nibh mattis laoreet. In ut sapien in felis posuere feugiat. Nulla vulputate, augue nec elementum volutpat, justo nisl vulputate tellus, eget blandit lectus enim at ante. Donec posuere augue a orci sollicitudin ut imperdiet ante varius. 
</div>

JavaScript

$(document).ready(function () {
    
    $.fn.getPercent = function(){
        var sensor = $('<div />').css({margin: 0, padding: 0, width: "300px"});
        sensor.text($("#wrapper").text());
        $("#wrapper").append(sensor);
        
        var width = sensor.width();
        var height = sensor.height();
        var textArea = width * height;
        
        var divWidth = $("#wrapper").width();
        var divHeight = $("#wrapper").height();
        var divArea = divWidth * divHeight;
        sensor.remove();
        
        return divArea / textArea;
    };
    
    
    function test(){
        alert("here");
        
        var percent = $("div").getPercent();
        
        var textArray = $("div").text().split('');
        
        var ellipsedText = textArray.slice(0, (textArray.length * percent) - 3).join('') + "...";
        
        $("div").text(ellipsedText);
    }
    
    test();

});