CSS: Dynamic Font Size; span entire width of div [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

Auto-size dynamic text to fill fixed size container.

Let's say i have a div that is 600 px high and 400 px wide. I want my text in the middle of this, and to span the entire width of the div. Is there something in CSS or CSS3 that will let me auto do this based on how much text a user inputs?

so, the word FOO would be larger than the word FOOBAR as foobar would take up more space, thus dynamically resizing that text.

Just wondering; I'm not sure i开发者_运维技巧f it's possible (would be acceptable to have a JS solution too..)

Thank you!

---

One solution I can think is:

Let says the max size you can have by just typing word FOO in box is 200px

So create a new hidden div set a fixed width of 600 but not height, then loop through

1. Create new hidden div
2. Set a width 600 and leave the height
3. loop through javascript by reducing the font-size until the height is <= 400

---

I don't see how you can do this for proportional fonts (like Arial) without a lot of effort. Each character has a different width.

You may be able to do this for a "monospace" font like Courier New. You'd have to extract the text, count the number of characters and adjust the font-size accordingly. However different monospace fonts have different widths, so you'd have to have a table of widths versus fonts. However this shouldn't be too difficult to do with a bit of experimentation.