JSFiddle - React, Tailwind, and code Playground

by LinkinTED

HTML

<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/><br/>
    Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p>
</div>

CSS

.box {
    display:block;
    position:relative;
    width:25%;
    height:300px;
    background:orange;
}
    .box p {
        background:rgba(0,0,0,.1);
        line-height: 100%;
    }

JavaScript

function responsiveText(){
    var i = 0.5;

    do {
        $(".box p").css("font-size",(i) + "px");

        var textHeight          =  $(".box p").height(),
            containerHeight     =  $(".box").height();
        i += 0.5;   

    } while ( textHeight < containerHeight );
    
    var ratio = ( containerHeight / textHeight ) * 100;
    ratio = Math.floor(ratio);
    $(".box p").css("line-height",ratio+"%");
} 

responsiveText();


$(window).resize(function(e) {
    responsiveText();
});