Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Have text scale up in size to fit the container

Tags:

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.

like image 944
MHD Avatar asked Jan 24 '12 17:01

MHD


People also ask

How do you scale text in HTML?

In HTML, you can change the size of text with the <font> tag using the size attribute. The size attribute specifies how large a font will be displayed in either relative or absolute terms. Close the <font> tag with </font> to return to a normal text size.

How do I make text fit in a box in CSS?

You have to set 'display:inline-block' and 'height:auto' to wrap the content within the border. Show activity on this post. Two ways are there. No need to mention height in this it will be auto by default.

How do I change font size and width?

The font size can be set with vw (viewport) unit, which means the viewport width. The viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.


1 Answers

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....

like image 135
Miss A Avatar answered Sep 19 '22 11:09

Miss A