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

Question

如果我有一个 x 高的 div，我怎样才能使它里面的文本最大，假设它只能占用一行。

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

Answer 1

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

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 循环已完成。

Answer 2

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

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

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

Answer 3

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

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