JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box" style="width:700px">This is a sentence</div>
<div class="box" style="width:600px">This is a sentence</div>
<div class="box" style="width:500px">This is a sentence</div>
<div class="box" style="width:400px">This is a sentence</div>

CSS

.box {
  background: yellow;
  margin: 10px;
  text-align: center;
}

JavaScript

$('.box').each(function(i, box) {

  var width = $(box).width(),
    html = '<span style="white-space:nowrap">',
    line = $(box).wrapInner(html).children()[0],
    n = 100;

  $(box).css('font-size', n);

  while ($(line).width() > width) {
    $(box).css('font-size', --n);
  }

  $(box).text($(line).text());

});