JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Barely any text.</li>
    <li>Medium amounts of text. Medium amounts of text.</li>
    <li>Loads, loads, and loads of text. Loads, loads, and loads of text. Loads, loads, and loads of text.</li>
</ul>

CSS

li {
    background-color: #00f;
    color: #fff;
    display: inline-block;
    float: left;
    clear: left;
}

JavaScript

$('li').each(function() {
    var width = $(this).width();
    var cur_text = $(this).text();
    while(width > 150) {
        cur_text = cur_text.substr(0, cur_text.length - 1);
        $(this).text(cur_text + "...");
        width = $(this).width();
    }
});