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!

A 100% font size would look at the size of the font it's using and go to 100% of its default size, it would not look at your box's height. — animuson, Oct 19 '11 at 18:23
@animuson Thanks for the info! That's what I thought. Any solutions? — Web_Designer, Oct 19 '11 at 18:26

score 6 · Answer 1 · answered Oct 19 '11 at 18:23

6

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

answered Oct 19 '11 at 18:23

Bas

103
3

5

Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only! – Jawad Oct 19 '11 at 18:27
1

Thanks for the plugin! Anything more lightweight? jQuery is a bit obese for my good looking website. :) – Web_Designer Oct 19 '11 at 18:28
1

Is there anything that supports paragraphs? – Web_Designer Oct 20 '11 at 00:25

score 0 · Answer 2 · edited Jan 16 '16 at 09:19

fittext.js did not work correctly for me (plugin for jQuery, as well as derived jquery-free version), nor with using of compressor attribute, so I found another solution:

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box (someone's another work)

which works perfectly for me - longer texts as well as shorter texts.

It just do not react to resize of window (it works just once on loading of page), so I have written this short code to run it automatically after each window resize (it works for me):

<script>
      function calculate_font_sizes()
      {
        fitTextInBox('login-h1');
        fitTextInBox('subtittle');
      }
      calculate_font_sizes();
      window.addEventListener('resize', calculate_font_sizes);

</script>

I hope it can help to someone.

@Zeus Zdravkov: Which way? – Martin Adámek Sep 02 '17 at 01:55 — Martin Adámek, Sep 02 '17 at 01:55

score 0 · Answer 3 · answered Oct 19 '11 at 18:40

0

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" ); 
    } 
});

answered Oct 19 '11 at 18:40

Jawad

8,352
10
40
45

taken from - http://stackoverflow.com/questions/6112660/how-to-resize-automatically-a-font-size-inside-a-div – Jawad Oct 19 '11 at 18:41

score -2 · Answer 4 · answered Sep 13 '16 at 22:55

-2

Check out the vw properties in css

http://www.w3schools.com/cssref/css_units.asp

answered Sep 13 '16 at 22:55

Nick

3,217
5
30
42

1

Vw is for width. The user asked for width and height. And his example is not for body. So, your answer is unuseful. – Andrei Dec 26 '20 at 08:36
I believe as the width increases the height increases as well. – Nick Jan 10 '21 at 17:04

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

4 Answers4

Linked

Related