JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="fieldLabel" id="fieldLabel">
        <span class="fieldText" id="fieldText">my text</span>
    </div>
</div>

<br>
<p style="color: #444">Smoothly resize the window, narrowing it.<br>
In browsers: Opera, Chrome, Safari, IE7, FF<br> field "text" will be cut immediately,<br> and only then will turn red.<br>Browsers: IE8, IE9 <br>the "text" will turn red<br>as soon as will be cut.</p>

<br>
<br>

<div id="label_1"></div>
<div id="label_2"></div>
<div id="label_3"></div>
<div id="label_4"></div>
<div id="label_5"></div>

CSS

.container{
            width:12%;
            height:20px;
            position:relative;
        }

        .fieldLabel{
            border: solid 1px pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }

        .fieldText{
            white-space: nowrap;
            border: 0;
            padding: 0;
            margin: 0;
        }

JavaScript

$(window).resize(function() {  
    
    var fieldLabel = document.getElementById("fieldLabel");
    var fieldText = document.getElementById("fieldText");
         

    var currentWidth = fieldText.offsetWidth;
    fieldLabel.style.textOverflow = "clip";
    var realWidth = fieldText.offsetWidth;
    fieldLabel.style.textOverflow = "ellipsis";

    if(fieldText.offsetWidth > fieldLabel.offsetWidth
        || realWidth > currentWidth
        || fieldLabel.scrollWidth > fieldLabel.offsetWidth){
            
        fieldText.style.color = "red";
            
    } else {
        
        fieldText.style.color = "black";
        
    }

    document.getElementById("label_1").innerHTML = "currentWidth = " + currentWidth;
    document.getElementById("label_2").innerHTML = "realWidth = " + realWidth;
    document.getElementById("label_3").innerHTML = "fieldLabel.offsetWidth = " + fieldLabel.offsetWidth;
    document.getElementById("label_4").innerHTML = "fieldText.offsetWidth = " + fieldText.offsetWidth;                           
    document.getElementById("label_5").innerHTML = "fieldLabel.scrollWidth = " + fieldLabel.scrollWidth;
});