如何根据长度减小字体大小? [英] 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屋！