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.
不，实际上不可能根据“容器宽度和容器中有多少字符”计算的可用空间缩放字体大小，只有.css
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.
链接地址: http://www.djcxy.com/p/87524.html下一篇: 将文本保留在一行上并缩放字体