HTML / CSS - adjust font-size to fill parent height and width

Question

I have a <div> element that resizes as the browser window resizes.

Inside the <div> I have a paragraph of text:

<div style="width:80%; height:80%; margin:10%;">
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>

I want the text to change font-size as I resize the <div>, so that the text will occuypy 100% of the available space.

How can I achieve this effect?
Would it be with a percentage font-size?
Would I have to use Javascript?

Thanks in advance!

Solution 1

There's a jquery plugin for this: http://fittextjs.com/

Solution 2

HTML

<div id="change" style="margin:10%;"> 
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p> 
</div> 

CSS

#change { 
    width: 80%; 
    height: 80%; 
    border: 1px solid black; 
    overflow: hidden; 
    font-size: 1em; 
} 

JAVASCRIPT

$(function() { 
    while( $('#change div').height() > $('#change').height() ) { 
        $('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px" ); 
    } 
}); 

Comments

[Jawad]

Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!

[Web_Designer]

Thanks for the plugin! Anything more lightweight? jQuery is a bit obese for my good looking website. :)

[Jawad]

taken from - stackoverflow.com/questions/6112660/…

[Web_Designer]

Is there anything that supports paragraphs?

[Sébastien Tromp]

What happens if your text changes? How do you make sure the text still occupies all the available space?

[undefined]

@SébastienTromp: There are 2 variants. Variant 1: With the script that changes your text, also change the font-size property. Variant 2: Use JS to calculate the text size and then set the font-size property

[Martin Adámek]

@Zeus Zdravkov: Which way?

[maracuja-juice]

If the container is not the body this method won't help.

[Andrei]

The example given in OP is not for body! Anyway, vw does not change the text height as he asked.

[Andrei]

Vw is for width. The user asked for width and height. And his example is not for body. So, your answer is unuseful.

[undefined]

@Andrei I believe this is as close as it gets with CSS only. It is certainly possible to achieve the exact result with JavaScript fairly easily, however, in my opinion, this solution could still be beneficial to many people who are looking to dynamically change font-size based on the viewport dimensions without JS. I know for sure that this method has proven very useful to me a number of times for titles, and I just wanted to share it (almost 4 years ago). No doubt there are much better options.

[Nick]

I believe as the width increases the height increases as well.