JSFiddle - React, Tailwind, and code Playground

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:50px;
    text-overflow:clip;

    vertical-align:bottom;
    position:relative;
    left: -50%;
}
.text-overflow-wrapper{
    padding-left:10px;
    padding-right:10px;
    width:70px;
    overflow:hidden;
    text-overflow:clip;

    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())