CSS Textsize based on Container Width?

Question

Is is possible to set the text size in CSS such that it adjusts to the container width?

I made an example for that. The left container is small which should make the font size smaller than for the right container. I know how this is done with JavaScript, but can I also be done with pure CSS?

enter image description here

display: inline-block; should work for you, EDIT: sorry read wrong. — Szymon, Dec 17 '13 at 15:42
http://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size — koningdavid, Dec 17 '13 at 15:43
Take a look at this answer - http://stackoverflow.com/questions/10292001/how-to-set-font-size-based-on-container-size — AnuragBabaresco, Dec 17 '13 at 15:43
You can set text width with percent(%). I think it should work. — hamidfzm, Dec 17 '13 at 18:17

otinanai · Answer 1 · 2013-12-18T16:54:29.080

2

You can use viewport units instead of pixels, points or em. It's a CSS3 property.

1vw: 1% of viewport width
1vh: 1% of viewport height
1vmin: 1vw or 1vh, whatever is smallest
1vmax: 1vw or 1vh, whatever is largest

More info here.

edited Dec 18 '13 at 16:54

answered Dec 17 '13 at 17:19

otinanai

3,987
3
25
43

Does all mobile devices support viewport values? – Michael Dec 17 '13 at 19:40
@confile You can check the browser compatibility here: http://caniuse.com/viewport-units – otinanai Dec 18 '13 at 16:53

CSS Textsize based on Container Width?

1 Answers1