JSFiddle - React, Tailwind, and code Playground

by cwolves

HTML

<div class="wrapper">
    <span>Some long text goes here, la la la.  The quick brown fox jumps over the lazy dog.</span>
    <div class="ellipsis">…</div>
</div>
        
<div class="wrapper">
    <span>Short text</span>
    <div class="ellipsis">…</div>
</div>

CSS

.wrapper {
    width       : 100px;
    white-space : nowrap;
    overflow    : hidden;
    position    : relative;
}

.ellipsis {
    display    : none;
    position   : absolute;
    top        : 0px;
    right      : 0px;
    z-index    : 2;
    background : #FFF;
}

JavaScript

$('.wrapper span').each(function(){
    var $this = $(this);
    if($this.width() > $this.parent().width()){
        $this.parent().find('.ellipsis').show();
    }
});