JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<span class="endtext">Short</span>
<div class="endtext">Loooooooooooooooon</div>
</div>
CSS
.container{
width:65px;
border:1px solid #000;
}
.endtext{
display: block;
border: 1px solid black;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
JavaScript
$(function() {
$('.endtext').each(function(index, elem) {
debugger;
if(elem.offsetWidth !== elem.scrollWidth){
$(this).css({color: '#FF0000'})
}
});
});