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

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：

  

确保您的容器有宽度！   display：内联元素没有宽度。使用display：block OR display：inline-block + a＆gt;指定宽度（即宽度：100％）。

Bold是我的重点。

在homepage上查看FitText，也发现没有固定的宽度单位。

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

我的其他意见（危险提防）： 根据我遇到类似问题的经验，因为你可能会在设计方面看到一些错误，如果你 需要 Javascript为你的布局保持完整，我认为需要重新考虑。护理设计通常比用撬棍敲打它更好。 结束意见

Answer 2

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

将内容放入white-space: nowrap的范围内。 如果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";
}

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

如果在调整窗口大小时分配的宽度发生了变化，则可能需要在窗口调整大小时运行它。