2

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.

csteel
  • 373
  • 1
  • 6
  • 16
  • Responsive font is one of the worst problem in the web design industry. Hope you find an answer 'cause I really want to know to! – Karl-André Gagnon May 03 '13 at 14:45
  • 1
    Duplicate of http://stackoverflow.com/questions/8990999/have-text-scale-up-in-size-to-fit-the-container – Derek Henderson May 03 '13 at 14:45
  • I don't know how to do this in pure CSS but [I did it in JavaScript](http://stackoverflow.com/questions/10944367/find-out-the-effective-width-of-element-and-resize-text-in-it) – Denys Séguret May 03 '13 at 14:46
  • http://stackoverflow.com/search?q=scale+text --> 9,652 results || http://stackoverflow.com/search?q=scale+text+with+available+space --> 127 results – Milche Patern May 03 '13 at 14:53

2 Answers2

4

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.

SleBluue
  • 257
  • 1
  • 5
  • 18
  • Can you explain what you mean by `_vw`? – CodyBugstein Mar 20 '18 at 03:09
  • vw = viewport width. It is sizing unit like px or em. @CodyBugstein More info can be found on MDN - https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units – BJax Jun 04 '20 at 17:48
1

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

Milche Patern
  • 19,632
  • 6
  • 35
  • 52