JSFiddle - React, Tailwind, and code Playground

by whoamiwho

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) {
        if (isEllipsisActive(this))
            $(this).css({'color':'red'}).attr('title', $(this).html());
    });
});
    function isEllipsisActive(e) {
         return (e.offsetWidth < e.scrollWidth);
    }