JSFiddle - React, Tailwind, and code Playground

HTML

<span class="cat">Small Cat</span>
<span class="cat">Looooooooooooooong Cat</span>

CSS

span.cat {
    display: block;
    border: 1px solid black;
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

JavaScript

$(function() {
    $('span.cat').each(function(i) {
        var element = $(this)
                        .clone()
                        .css({display: 'inline', width: 'auto', visibility: 'hidden'})
                        .appendTo('body');
        
        if( element.width() > $(this).width() ) {
            $(this).css({color: '#FF0000'})
        }
        
        element.remove();
    });
});