Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 727
Web_Designer Avatar asked Oct 19 '11 18:10

Web_Designer


People also ask

How do I change font size relative to parent DIV?

The way I solved this problem was to use javascript to measure the container and then set the font size in px on that container. Once that baseline is set for the container then the relative font sizing of all the content will scale correctly using em or %.

How do I automatically adjust font size in HTML?

Syntax: font-size-adjust: number|none|initial|inherit; Below are the examples that illustrates the use of font-size-adjust property.

How do I set relative font size in CSS?

If the font-size you want is 12px , then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px , then specify 0.625em (10/16 = 0.625); for 22px , specify 1.375em (22/16).

How do I change the font and family size in HTML?

To change font size in HTML, use the CSS font-size property. Set it to the value you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a paragraph, heading, button, or span tag.


3 Answers

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

like image 200
Bas Avatar answered Oct 13 '22 01:10

Bas


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" ); 
    } 
}); 
like image 43
Jawad Avatar answered Oct 13 '22 02:10

Jawad


What you need is called vw. Example CSS: font-size: 80vw;. vw means viewerport width, and 80vw = 80% of the device screen width

like image 23
undefined Avatar answered Oct 13 '22 01:10

undefined