<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();
This Pen doesn't use any external CSS resources.