JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
<div class="block">
<h2>Tittle asfasj gpash gj9ahg pasgnap sighapigha psogna</h2>
</div>
</li>

<li>
<div class="block">
<h2>5Tittleasfa sjgp ashgj9ahgp asgnapsig hapighap sogna</h2>
</div>
</li>

<li>
<div class="block">
<h2>2Tittleasf asjgpa shgj9ahgp asgnapsig hapig hapsogna</h2>
</div>
</li>
</ul>

CSS

.block { margin: 5px; background: cyan; width: 100px; height: 20px; overflow: hidden; word-wrap: break-word; }
.block h2 { margin: 0; }

JavaScript

$('.block').each(function (i, el) {
    var $h2 = $(el).find('h2');
    var divh = $(el).height();
    while ($h2.outerHeight() > divh) {
        $h2.text(function (index, text) {
           return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
});