JSFiddle - React, Tailwind, and code Playground

by Ankit Patidar

HTML

<div style="width:200px;height:100px;" class="textfill" max-font-size="20">
  <span textfill>BBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishinBNews - Business Feed provided by the news provider is free for non-commercial use. If you wishinBBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishinBBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishiBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishinBBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishinBBC News - Business Feed provided by the news provider is free for non-commercial use. If you wishi</span>
</div>

JavaScript

(function($) {
	$.fn.textfill = function(maxFontSize) {
		maxFontSize = parseInt(maxFontSize, 10);
		return this.each(function(){
			var ourText = $("span", this);
			function resizefont(){
				var parent = ourText.parent(),
				maxHeight = parent.height(),
				maxWidth = parent.width(),
				fontSize = parseInt(ourText.css("fontSize"), 10),
				multiplier = maxWidth/ourText.width(),
				newSize = (fontSize*(multiplier));
				ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
			}
			$(window).resize(function(){
				resizefont();
			});
			resizefont();
		});
	};
  
})(jQuery);

$(function(){
    $(".textfill").textfill();
    
    //$(".textfill.much").textfill(0, 11);
});