Resize text to totally fill container <p>I have a <code>div</code> with a fixed height and a fluid width (15% of <code>body</code> width). I want the paragraph text inside to totally fill the <code>div</code>; not overflow and not underfill.</p> <p>I've tried with jQuery to increment the text size until the height of the paragraph is equal to the height of the container <code>div</code>. At that point, the text should be totally covering the <code>div</code>. The only problem is that font-size increments in 0.5px values. You can't do 33.3px; it has to be either 33.0px or 33.5px. So at 33px, my text is far too short to cover the <code>div</code>, and at 33.5px it overflows.</p> <p>Does anyone have any ideas on how to remedy this? There are lots of plugins for making text fill the whole width of a container, but not for text that has to fill both the width and height. At least, none that I've seen.</p> <pre><code>&lt;head&gt; &lt;style type="text/css"&gt; .box { display:block; position:relative; width:15%; height:500px; background:orange; } .box p { background:rgba(0,0,0,.1); /* For clarity */ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="box"&gt; &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. &lt;br&gt;&lt;br&gt; Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.&lt;/p&gt; &lt;/div&gt; &lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; 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 &lt; containerHeight ); // While the height of the paragraph block is less than the height of the container, run the do...while loop. } responsiveText(); $(window).resize(function(e) { responsiveText(); }); &lt;/script&gt; &lt;/body&gt; </code></pre> <p><img src="https://i.stack.imgur.com/BGz0d.jpg" alt="Text set at 33px. It is too short."> Text set at 33px. It is too short.</p> <p><img src="https://i.stack.imgur.com/NVyrT.jpg" alt="Text set at 33.5px. It overflows."> Text set at 33.5px. It overflows.</p>