字体大小等于当前容器的高度答案

【问题标题】：Font Size equal to the height of the current container字体大小等于当前容器的高度
【发布时间】：2011-11-26 02:35:12
【问题描述】：

如果我有一个 x 高的 div，我怎样才能让其中的文本达到最大值，假设它只能占用一行。

虽然我更喜欢 CSS 答案，但接受任何 jquery/javascript 答案只是因为我需要它以任何一种方式工作:)

【问题讨论】：

我认为你不能轻易做到这一点。为了实现您的需求，您必须获取要显示的文本并以客户端使用的特定字体测量其宽度。然后继续减小字体大小，直到宽度适合容器的宽度 - 这将确保您在一行中输出它。最后，您需要采用找到的大小或容器高度中的较小者 - 这就是您的字体大小。由于您真的无法控制字体（由于客户端上的字体替换），因此您无法在 CSS 中实现这一点。在javascript中可能是可能的，但我不确定。

标签： jquery html css font-size

【解决方案1】：

根据 Aleks G 的评论，this example 展示了如何逐步增加字体大小，直到达到最大值：

HTML

<div>
    <span>This is some text</span>
</div>

CSS

div {
  width: 300px;
}

span {
  display: inline-block;   
}

jQuery

var $span = $('span');
var $div = $('div');

while($span.width() < $div.width()){
    $span.css({fontSize: "+=1"});   
}
$span.css({fontSize: "-=1"});

如果您想在更改字体大小时消除任何卡顿，您可以隐藏文本直到 while 循环完成。

【讨论】：

【解决方案2】：

将font-size和line-height设置为与容器相同的高度：

div {
    height:50px;
    font-size:50px;
    line-height:50px;
    border:1px solid red;
}

演示：http://jsfiddle.net/AlienWebguy/V7f4w/

【讨论】：

【解决方案3】：

我不知道可以使用跨浏览器兼容的纯 CSS 来做到这一点。使用 javascript 和/或 jquery 来执行此操作。我会用 jquery 写出来，因为它更容易一些：

$("mydiv").css("font-size", $("mydiv").css("height"));

【讨论】：