JSFiddle - React, Tailwind, and code Playground

HTML

<div>
</div>

CSS

div {
    width: 200px;
    line-height: 15px;
}

JavaScript

var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra quam non eros tristique ut semper ligula iaculis. Mauris vulputate, quam in pulvinar fermentum, urna nunc mattis est, nec tincidunt nulla nibh a sem. Ut eu enim nec tortor sodales placerat. Donec mattis ultricies erat vel tristique. Pellentesque eu sem nunc, nec facilisis felis. In eu adipiscing mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non justo a lorem eleifend pharetra et at orci. Nulla dignissim posuere pretium. Duis lectus erat, dictum sit amet congue ullamcorper, iaculis id velit. Nulla a ullamcorper nisl. Maecenas dapibus quam et libero mollis tempor et vel leo. Ut et erat eget urna elementum elementum nec quis lectus. Curabitur facilisis massa eget erat consequat porta. Nam suscipit tempus ante, ac rutrum orci porttitor id. Suspendisse accumsan sapien at turpis facilisis faucibus sit amet eget turpis. Sed venenatis suscipit diam et scelerisque. Proin fringilla eros vitae leo accumsan tempor. Aliquam erat volutpat. Curabitur ullamcorper tortor id nibh volutpat eu feugiat purus dapibus. Aenean commodo, nunc eu scelerisque mollis, ligula mi congue arcu, eget posuere ipsum magna ut purus.";

var changesInHeight = 0,
    prevHeight = 0,
    words = text.split(" ");
    div = document.getElementsByTagName("div")[0];
for(var i = 0; i < words.length; i++) {
    var prevText = div.innerHTML;
    div.innerHTML += words[i] + " ";
    
    var height = div.getClientRects()[0].height;
    if (height > prevHeight)
        changesInHeight++;
    prevHeight = height;
    
    if (changesInHeight > 8) {
        div.innerHTML = prevText + "...";
        break;
    } 
}