JSFiddle - React, Tailwind, and code Playground

HTML

<div id="demo">
    <p>this  is too much of text here this is too much of text here this is too much  of text here this is too much of text here this is too much of text  here this is too much of text here this is too much of text here this is  too much of text here this is too much of text here this is too much of  text here this is too much of text here this is too much of text here  this is too much of text here </p>  
</div>

CSS

#demo { 
    overflow: hidden; 
    width: 200px; 
    height: 100px; 
}

#demo p { 
    margin: 0; 
    padding: 5px;
}

JavaScript

var p=$('#demo p');
var divh=$('#demo').height();
while ($(p).outerHeight() > divh) {
    $(p).text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}