JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="results"></div>

CSS

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

JavaScript

$t = $('#text');
$r = $('#results');

var shown, all, hiddenWidth;

// we start with the shown width set (via css) at 100px
shown = $t.width();
$r.html('shown width: ' + shown);

// we change the css to overflow:visible, float:left, and width:auto
$t.css({'overflow': 'visible', 'float': 'left', 'width': 'auto'});

// and get the total width of the text
all = $t.width();
$r.html($r.html() + '<br />visible/float width: ' + all);

// then we set the css back to the way it was
$t.css({'overflow': 'hidden', 'float': '', 'width': '100px'});

// and retrieve the hiddenWidth
hiddenWidth = all - shown;
$r.html($r.html() + '<br />hidden width: ' + hiddenWidth);