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

$.expr[':'].truncated = function(obj) {
  var $this = $(obj);
  var $c = $this
             .clone()
             .css({display: 'inline', width: 'auto', visibility: 'hidden'})
             .appendTo('body');

  var c_width = $c.width();
  $c.remove();

  if ( c_width > $this.width() )
    return true;
  else
    return false;
};

$(function() {
    $('span.cat:truncated').css('color', 'red');
});