css - 如何根据长度减小字体大小？

Question

目前，我在页面上有一些大文本，布局适用于短文本(长度约为 12-14 个字符)，但超过这个长度就会溢出或换行。这是不可取的，所以我希望缩小尺寸以适合整个文本。

我研究过 FitText 和 BigText 等 JS 解决方案，但它们依赖于固定宽度。因为我使用的是 Bootstrap，所以我没有固定的宽度。

好的:http://tf2reputation.com/profile.php?id=76561197960947673
不好:http://tf2reputation.com/profile.php?id=76561198054504781

我也考虑过设置 white-space: nowrap 或截断，但我更愿意显示所有文本，但如果可能的话，要小一些。

Answer 1

FitText 确实适用于流体宽度。

来自github page :

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%).

粗体是我用来强调的。

查看 homepage对于 FitText 还表明看不到固定宽度的单位。

我还应该提到，没有一种原生 CSS 技术可以实现这一点。最接近的可能是 viewport relative lengths但这并不能解决您的问题。

我的补充意见(注意危险):根据我的经验，当您遇到这样的问题时，这是因为您可能从设计方面看问题有点不对，如果您需要 Javascript布局保持完整，我认为需要重新考虑。维护一个设计通常比用一根 pry 棍把它敲到位要好。结束意见