JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">hello World</div>


<div class="log" style="margin-top: 50px;"></div>

CSS

#test {
    margin-top: 20px;
    width: 68px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid green;
}

JavaScript

function ellipsify($c){
    // <div $c>                 content container (passed)
    //    <div $b>              bounds
    //       <div $o>           outer
    //          <span $i>       inner
    //       </div>
    //       <span $d></span>   dots
    //    </div>
    // </div>
    
    var $i = $('<span>' + $c.html() + '</span>');
    var $d = $('<span>...</span>');
    var $o = $('<div></div>');
    var $b = $('<div></div>');
    
    $b.css( {
        'white-space' : "nowrap",
        'display' : "block",
        'overflow': "hidden"
    }).attr('title', $c.html());
    
    $o.css({
        'overflow' : "hidden",
        'width' : "100%",
        'float' : "left"
    });
    
    $c.html('').append($b.append( $o.append($i)).append($d));
    
    function getWidth($w){
        return parseInt( $w.css('width').replace('px', '') );
    }

    if (getWidth($o) < getWidth($i))
    {
        while (getWidth($i) > (getWidth($b) - getWidth($d)) )
        {
             var content = $i.html();
             $i.html(content.substr(0, content.length - 1));
        }
        
        $o.css('width', (getWidth($b) - getWidth($d)) + 'px');
    }
    else
    {
        var content = $i.html();
        $c.empty().html(content);
    }
}

$(function(){
    ellipsify($('#test'));
});




function log(sMessage){
     $('div.log').append($('<div>' + sMessage + '</div>'));   
}