JSFiddle - React, Tailwind, and code Playground

HTML

<div class="textfill">This is just a simple text</div>

CSS

.textfill {
    width: 530px;
    height: 240px;
    font-size: 9px;
    text-align: center;
    border: 1px solid #ccc;
    margin: 10px;
    overflow: hidden;
}

JavaScript

(function($) { 
      $.fn.textfill = function(options) { 
        return this.each(function() {
          var text = $(this).text();
          $(this).text('');
          var container = $('<span />').text(text).appendTo($(this));
          var min = 1, max = 200, fontSize;
          do {
            fontSize = (max + min) / 2;
            container.css('fontSize', fontSize);
            var multiplier = $(this).height()/container.height();
            if (multiplier == 1) { min = max = fontSize}
            if (multiplier >  1) { min = fontSize}
            if (multiplier <  1) { max = fontSize}
          } while ((max - min) > 1);
          fontSize = min;
          if ($(this).width() < container.width()) {
            min = 1;
            do {
              fontSize = (max + min) / 2;
              container.css('fontSize', fontSize);
              var multiplier = $(this).width()/container.width();
              if (multiplier == 1) { min = max = fontSize}
              if (multiplier >  1) { min = fontSize}
              if (multiplier <  1) { max = fontSize}
            } while ((max - min) > 1);
            fontSize = min;
          }
          container.remove();
          $(this).text(text);
          var minFontSize = options.minFontPixels;
          var maxFontSize = options.maxFontPixels;
          $(this).css('fontSize', 
                      minFontSize && (minFontSize > fontSize) ?
                      minFontSize :
                      maxFontSize && (maxFontSize < fontSize) ?
                      maxFontSize :
                      fontSize); 
        }); 
      }; 
    })(jQuery);

$(".textfill").textfill({ minFontPixels: 20 });