JSFiddle - React, Tailwind, and code Playground

by lsauer

HTML

<div class="text-overflow">1234567890123434234</div>
<div class="text-overflow-compute"></div>

CSS

.text-overflow{
    
}
.text-overflow-compute{
     display:none;   
}
.text-overflow{
    display: inline-block;
    width:auto;
    text-overflow:clip;
    overflow:hidden;
    vertical-align:bottom;
}
.text-overflow-wrapper{
    vertical-align:bottom;
}
.text-overflow-wrapper:before{
    content:"...";
}
.text-overflow-wrapper:after{
    content:"!";
}

JavaScript

$('.text-overflow').wrap('<div class="text-overflow-wrapper"></div>');
$('.text-overflow-compute').html('...!');
console.log($(".text-overflow-compute").width())