Have text scale up in size to fit the container

css fonts scale
MHD picture MHD · Jan 24, 2012 · Viewed 35.9k times · Source

Using CSS, and specifically no onload javascript, would it be possible to do this:

You have a cell of 150px wide and 100px in height. It contains a text, e.g.: $20,00 or any variant of that.

You want it to perfectly fit the size of the container.

I'd be able to do it with javascript, size up the text until a container without padding/margin reaches the cell's width and/or height. Or contain it in something that has an overflow set to auto and see when it overflows or something.

Can it be done with pure CSS?

Take into account that the font isn't a fixed size font, either. Use Arial if you like.

Answer

Miss A picture Miss A · Aug 23, 2012

Check this out: http://css-tricks.com/viewport-sized-typography/

Unfortunately this only works in Chrome 20+ & IE 10+ so for now you'll have to stick with a js solution....

Related questions

How to add some non-standard font to a website?

Is there a way to add some custom font on a website without using images, Flash or some other graphics? For example, I was working on a wedding website, and I found a lot of nice fonts for that subject. …

Read More
CSS Font Border?

With all the new CSS3 border stuff going on (-webkit, ...) is it now possible to add a border to your font? (Like the solid white border around the blue Twitter logo). If not, are there any not-too-ugly hacks that will …

Read More
How to import Google Web Font in CSS file?

I'm working with a CMS which I only have access to the CSS file. So, I can't include anything thing in the HEAD of the document. I was wondering if there was a way to import the web font from …

Read More