Dynamically resize text to fill div

Question

I have been searching for a solution to resize the text size in a div to make the text fill out the entire div height and width, with no avail.

I have made some images to help understand this problem: Div 1

So this is a simple div with a height and width set. This height and width does not change, the text in the box does! So what I want to do is to make that text fill the whole width and height of the div just like in the image below.

Div 2

I have been working on the simple example below and I simply cannot find out how to do this. I have tried setting relative font-sizes with percentage, doing things with overflow, text-aligning all not giving me the result I want.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            #box1, #box2{ 
                width: 400px;
                height: 300px;
                color: white; 
                margin: 10;
                font-size:larger;
                text-align:justify;
                letter-spacing: 100%;
            }

            #box1 { background-color: green;}
            #box2 { background-color: blue;}
        </style>
    </head>

    <body>
        <div id="box1">
            Llorem ipsum foo bar baz
        </div>
        <div id="box2">
            Foobar
        </div>
    </body>
</html>

Is this problem even solvable with simple CSS or will I have to do some javascript/jQuery?

score 7 · Accepted Answer · edited May 23 '17 at 12:16

7

As I said this may be a dupe of

Auto-size dynamic text to fill fixed size container.

The OP did a jQuery plugin for that means, you can download it here

It doesn't seem to up to date though!

Good luck!

edited May 23 '17 at 12:16

Community

1
1

answered Dec 06 '10 at 21:25

Trufa

39,971
43
126
190

Yes this seems to be the solution to the problem, seems to work with Chrome at least, will need to test in other browsers as well. – Cheesebaron Dec 06 '10 at 21:26
Good luck, I'm I chrome too so can't help you there. Please tell me if you have any problem implementing! – Trufa Dec 06 '10 at 21:38
3

links are broken. please paste the code directly – ngb Jul 14 '13 at 14:46
working link and answer here https://stackoverflow.com/a/67465220/12910765 – Rana Nadeem May 10 '21 at 05:35

score 2 · Answer 2 · answered Sep 20 '13 at 08:06

You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.

Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).

HTML:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

You also can set options to it:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

CSS:

#responsive_headline {
   width: 100%;
   display: block;
}

And if you need it, FitText also has a no-jQuery version.

This is not what the requester asked for. FitText simply allows for a ratio-based resizing; the requester asked for text to be resized so that it fully fills out the div (as in, you couldn't increase font-size: any more without characters hanging out of the div). — Agoston Horvath, Aug 12 '14 at 09:41

score 0 · Answer 3 · answered Dec 06 '10 at 21:15

0

My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.

answered Dec 06 '10 at 21:15

warriorpostman

2,268
2
16
26

1

Percentage in fonts is possible. 100% will be the size defined in your browser settings everything over or under 100% will resize according to that font size. – Cheesebaron Dec 06 '10 at 21:19

Dynamically resize text to fill div

3 Answers3

Linked