如何根据长度减小字体大小？答案

【问题标题】：How can I reduce font size based on length?如何根据长度减小字体大小？
【发布时间】：2014-07-24 14:36:23
【问题描述】：

目前我的页面上有一些大文本，并且布局适用于短文本（长度约为 12-14 个字符），但超过此值会溢出或换行。这是不可取的，所以我希望缩小大小以适应整个文本。

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

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

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

【问题讨论】：

您可以使用 JS 将字体大小表示为屏幕大小的比率，例如。默认字体/屏幕比例是 1:1，所以一个改变，其他的也改变
你试过FlowType.js吗？
更疯狂的想法：你可以用 SVG 写内容

标签： css twitter-bootstrap responsive-design

【解决方案1】：

FitText 确实适用于流体宽度。

来自github page：

确保您的容器有宽度！显示：内联元素没有宽度。使用 display: block OR display: inline-block+ a > 指定宽度（即宽度：100%）。

我用粗体表示强调。

查看 FitText 的 homepage 也显示没有固定宽度单位。

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

我的补充意见（注意危险）： 根据我的经验，当您遇到这样的问题时，这是因为您可能从设计方面看有些不对劲，如果您需要 Javascript 为您的布局保持不变，我认为需要重新考虑。照料一个设计通常比用撬棍把它敲到位要好。 结束意见

【讨论】：

是的，我做错了。这就是我在深夜编码所得到的。但我同意你的看法，我更喜欢非 JS 解决方案。发布此问题的部分原因是为了获得一些新鲜的眼光。

【解决方案2】：

您可以尝试使用 javascript 的迭代方法。

将内容放入带有white-space: nowrap 的span 中。如果span 是其中的跨度，您可以执行以下操作：

var maxWidth = span.parentNode.clientWidth;
var currentFont = parseInt(window.getComputedStyle(span).fontSize); // or max font size
while(span.offsetWidth > maxWidth) {
    currentFont--;
    span.style.fontSize = currentFont + "px";
}

这将不断递减字体，直到跨度适合其父级。

如果分配的宽度随着您调整窗口大小而改变，您可能需要在调整窗口大小时运行此命令。

【讨论】：

+1。一个很有前途的解决方案，但效率有点低，您必须将它应用到window.onresize。
确实，它不是最有效的算法，但某些优化是可能的。例如，您可以采用中点方法（而不是简单地递减），以在 log(n) 迭代中找到正确的大小。此外，当用户调整大小时，您可以检查他们调整大小的方向，以了解您是否需要减少或增加（可能最多只需要更改几个字体大小）。如果文本是静态的，您可以缓存当前宽度（或已计算的大小），以便在调整大小时节省未来计算的需要。不过，我想那时你还不如使用图书馆