How to adapt font-size to div-size?

Question

There is a div with a fixed height & width. This div contains dynamic content, text-content. If the text becomes too long, it will "explode" the div. And when the text becomes too short the div will look kinda empty.

So my conclusion would be to make the font bigger when the text is short and smaller when the text is long.

Never tried such a thing, how to achieve this?

€: as I'm using already dojo as js framework including jquery or any other framework is no option. Of course still thanks for the answers.

Answer 1

Create another element inside your DIV and add the text.

Divide the width of your DIV by the element, multiply by 100 and you've got the percentage value for css font-size.

You'll have to play around with the font size on your outer DIV to get the right fit though.

Answer 2

There are numerous plugins that might be sutable for this. One of them here.