JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text">This is shown. This is hidden</div>

<div id="result"></div>

<div id="container" style="visibility:hidden;"></div>

CSS

.text{
    
    
    outline:1px solid orange;
    
    width:100px;
    height:20px;
    overflow:hidden;
    
}

JavaScript

$("<span />").text($(".text").text()).appendTo("#container"); 

$("#result").append("<span>"+$(".text").width()+"</span><br />");
$("#result").append("<span>"+$("#container span").width()+"</span><br />");

$("#result").append("<span>Overflow: "+ (($("#container span").width() > $(".text").width()) ? "yes" : "no")+"</span><br />");