JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <span id="text_container">This is</span>
</div>

CSS

#container {
    background:cyan;
    width:200px;
    height:100px;
    line-height:100px;
}

#text_container {
    white-space:nowrap;
}

JavaScript

var container = $("#container"),
    text_container = $("#text_container"),
    start_size = 100,
    container_width = container.width();

    text_container.css('font-size', start_size + 'px');
    
    
    while (text_container.width() > container_width) {
        text_container.css('font-size', start_size--+'px');
    }