JSFiddle - React, Tailwind, and code Playground

by anupriya20076

HTML

<span class="cat">Small Cat</span>
<span class="cat">Looooooooooooooong Cat</span>
<span class="cat">hjjjjjjjjjjjjjjjjjjjjjjjjs</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');
});