<div class='container'>
  <h1 class='expand_txt'>I Like It Big</h1>
</div>
.container {
  width:50vw;
  left:0;
  right:0;
  margin:auto;
  height:80vh;
  position:absolute;
  border:1px solid blue;
  display:block;
}

.expand_txt {
  font-size:30px;
  font-family:Montserrat;
  font-weight:800;
  letter-spacing:-3px;
  display:inline-block;
  white-space:nowrap
}
$.fn.resizeText=function () {
  var el=this;
  if (el.length>1) return el.each(function () {
    $(this).resizeText();
  });

var resizeText=function () {
  console.log(el.attr("class"));
	  var fontsize=parseInt(el.css("font-size"));
	  var width=el.width();
	  var rentwidth=el.parent().width();
  console.log(width, rentwidth, fontsize);
 	  if (width<rentwidth){
	  while (width<rentwidth) {
 	  el.css("font-size",fontsize++);
	  width=el.width();
	  }
	  el.css("font-size",fontsize--);
	  return;
	  }
	  while (width>rentwidth) {
	  el.css("font-size",fontsize--);
	  width=el.width();
	  }
	  return;
	  }
resizeText();
$(window).on("resize",resizeText);
;
};
$(".expand_txt").resizeText();


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js