Question

125

Dynamically resize text to fill div

rated 0 times [ 131] [ 6] / answers: 1 / hits: 27588 / 14 Years ago, mon, december 6, 2010, 12:00:00

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

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

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>