JSFiddle - React, Tailwind, and code Playground

by Trent Haynes

HTML

<div class="div-cless">
    asdasf asf asfdda
</div>
    
<div class="div-cless">
    asdasf asf
</div>

CSS

div {
    width:158px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    text-transform: uppercase;
    border: .5px black solid;
}

JavaScript

$(function() {
    $('div').each(function(i) {
        if (isEllipsisActive(this))
            $(this).css({'color':'red'});
        else
             $(this).css({'color':'green'});
    });
});

function isEllipsisActive(e) {
     return ($(e).innerWidth() < $(e)[0].scrollWidth);
}