JSFiddle - React, Tailwind, and code Playground

by ExplosionPIlls

HTML

<div id=content>
    <p>hello world</p>
</div>

CSS

#content {
    width: 200px;
    background-color: gray;
}
p {
    margin: 0;
}

JavaScript

var $measurer = $("<div>").css({
    position: 'fixed',
    top: '100%'
}).attr('id', 'measurer');
$measurer.append($("<p>").text($("p").text())), escape = 0;
$measurer.appendTo("body");

while ($measurer.width() <= $("#content").width()) {
    $("#measurer p").css('font-size', '+=1px');
    console.log($("#measurer").width());
    escape++;
    if (escape == 100) {
        console.log('br');
        break;
    }
}
$("#measurer p").css('font-size', '-=1px');
$("#content p").css('font-size', $("#measurer p").css('font-size'));
$measurer.remove();