CODEWITHSUNDEEP
htmlcss
csteel
csteel

Reputation: 393

Keep text on one line and scale font

Hopefully this is possible to do in just CSS and not javascript+css.

What I am trying to achieve is say I have a container which has a fixed width of 100px. It cannot be smaller nor larger than 100px. I have text in this container that I want to always be on one line (nowrap) and if the text is too long it will scale the font to fit the container.

Is this possible? I tried setting the width and setting font-size: 100% with whitespace:nowrap. It doesn't quite work tho. The font scales but not enough to stay in the box. Using overflow:hidden wont work because it will cut the text off which I do not want.

Upvotes: 4

Views: 6643

Answers (2)

SleBluue
SleBluue

Reputation: 277

I know this is 4 years late,(This is for people searching this problem later on, as this was my number one hit on google) but I was able to do a small work around with {font-size: _vw}. I am not sure if this was back then. but for me personally, I set the vw of my text (with a little trial and error) to find the size I needed and stuck with it. It scales perfectly now. I guess you can come into issues with REALLY big screens and possibly mobile if the text becomes TOO small. But with just that one line of CSS it worked completely for me.

Upvotes: 5

Milche Patern
Milche Patern

Reputation: 20492

No it is not actually possible to scale a font size according to available space calculated on 'container width and how many characters are in container' with only .css

Upvotes: 2

Related Questions