JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="ellipsis">This is my text it is awesome</div>
</div>
<div class="box">
    <div class="ellipsis">This is my text</div>
</div>

CSS

.box {
    width: 200px;
}

.ellipsis:before {
    float: right;
    content: attr(data-tail);
}

.ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

JavaScript

var NUM_CHARS = 4;
var ellipsisDivs = document.querySelectorAll(".ellipsis");
for (var i = 0; i < ellipsisDivs.length; ++i){
    var e = ellipsisDivs[i];
    if (e.offsetWidth < e.scrollWidth){
        var text = e.textContent;
        e.dataset.tail = text.slice(text.length - NUM_CHARS);
    }
}