JSFiddle - React, Tailwind, and code Playground

by mjain_zonetv

HTML

<div id="fos">
  <p>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.</p>
</div>

CSS

#fos {
  width: 300px;
  height: 190px;
  overflow: hidden;
}

#fos p {
  padding: 10px;
  margin: 0;
}

JavaScript

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