目前我在页面上有一些大文本，并且布局适用于短文本（长度为~12-14个字符），但不止于此会溢出或换行。这是不可取的，所以我希望减小尺寸以适应整个文本。
我已经研究过像FitText和BigText这样的JS解决方案，但它们依赖于固定的宽度。由于我使用的是Bootstrap，因此我没有固定的宽度。
好的：http://tf2reputation.com/profile.php?id=76561197960947673
不行：http://tf2reputation.com/profile.php?id=76561198054504781
我还考虑设置white-space: nowrap或截断，但我更喜欢显示所有文字，但如果可能的话，我会更小。
答案 0 :(得分：3)
FitText可以使用流体宽度。
来自github page：
确保您的容器有宽度！ display：内联元素没有宽度。使用display：block OR display：inline-block + a＆gt;指定宽度（即宽度：100％）。
Bold是我的重点。
在homepage上查看FitText，也发现没有固定的宽度单位。
我还应该提一下，没有一种原生的CSS技术来实现这一目标。最接近的可能是viewport relative lengths，但这并不能解决你的问题。
我的其他意见（危险提防）： 根据我遇到类似问题的经验，因为你可能会在设计方面看到一些错误，如果你 需要 Javascript为你的布局保持完整，我认为需要重新考虑。护理设计通常比用撬棍敲打它更好。 结束意见
答案 1 :(得分：1)
您可以尝试使用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";
}
这将不断递减字体，直到跨度适合其父级。
如果在调整窗口大小时分配的宽度发生了变化，则可能需要在窗口调整大小时运行它。