如何根据长度减小字体大小? [英] How can I reduce font size based on length?
问题描述
目前,我在页面上有一些较大的文本,并且布局对于短文本(长度约为12-14个字符)可以很好地工作,但超出此范围将溢出或自动换行.这是不可取的,因此我希望减小字体大小以适合整个文本.
Currently I have some large text on a page, and layout works fine for short text (~12-14 chars in length), but any more than that will overflow or wrap. This is undesirable, so I'd like the size to be reduced to fit the whole text.
我研究了FitText和BigText之类的JS解决方案,但它们取决于固定宽度.由于我使用的是Bootstrap,因此没有固定的宽度.
I've looked into JS solutions like FitText and BigText, but they depend on a fixed width. Since I'm using Bootstrap, I don't have fixed widths.
好的: http://tf2reputation.com/profile.php?id=76561197960947673
不正确: http://tf2reputation.com/profile.php?id=76561198054504781
Okay: http://tf2reputation.com/profile.php?id=76561197960947673
Not okay: http://tf2reputation.com/profile.php?id=76561198054504781
我也考虑过设置white-space: nowrap
或截断,但我希望显示所有文本,但如果可能的话,显示较小的文本.
I'v also considered setting white-space: nowrap
or truncating, but I'd prefer to show all the text, but smaller, if possible.
推荐答案
FitText的工作宽度是可变的.
FitText does work with a fluid width.
在 github页面上:
确保您的容器有宽度! 显示:内联元素没有宽度.使用显示:块或显示:内联块+ a>指定的宽度(即宽度:100%).
Make sure your container has a width! display: inline elements don't have a width. Use display: block OR display: inline-block+ a > specified width (i.e. width: 100%).
加粗是我强调的重点.
查看首页上的FitText,也发现没有固定的宽度单位.
Looking on the homepage for FitText also reveals that there are no fixed width units in sight.
我还应该提到,没有本机CSS技术可以实现这一目标.最接近的内容可能是视口相对长度,但事实并非如此解决您的问题.
I should also mention that there is not a native CSS technique to achieve this. The closest thing would possibly be viewport relative lengths but that doesnt solve your problem.
我的其他观点(危险当心): 以我的经验,当您遇到这样的问题时,可能是因为您可能从设计角度看了一些错误,并且,如果您 require 布局保持完整,我认为需要重新考虑.护理设计通常比用撬棍将其固定到位更好. 最终意见
My additional opinion (danger beware) : In my experience when you are confronted with a problem like this, its because you may be looking at things a little wrong from the design side, And if you require Javascript for your layout to stay intact, I do think that needs to be reconsidered. Nursing a design along is usually better than banging it into place with a crowbar. End Opinion
这篇关于如何根据长度减小字体大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!