JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fos">
<span id="sp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</span>
</div>
CSS
#fos { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
font-weight: normal;
line-height: 18px;
width: 238px;
height:38px;
cursor: pointer;
word-break: break-all;
border:2px solid; }
#sp { }
JavaScript
var p=$('#sp');
var divh=$('#fos').height();
while ($(p).outerHeight()>divh) {
$(p).text(function (index, text) {
return text.replace(/\W*\s(\S)*$/, '...');
});
}