JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" >
    <div>first > second > third</div>
    <div>second > third > fourth > fifth > sixth</div>
    <div>fifth > sixth > seventh > eighth > ninth</div>
</div>

CSS

#container {
    width: 200px;
    border: 1px solid blue;
}

#container div {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

JavaScript

var rows = document.getElementById('container').childNodes;
for (var i=0, row; row = rows[i]; i++) {
    if (row.scrollWidth > row.offsetWidth) {
        var textNode = row.firstChild;
        var value = '...' + textNode.nodeValue;
        do {
            value = '...' + value.substr(4);
            textNode.nodeValue = value;

        } while (row.scrollWidth > row.offsetWidth);
    }
}