Question

如果我有一个高x的div，我怎么能把它里面的文本设为最大值，假设它只能占用一行。

虽然我更喜欢CSS答案，但任何jquery / javascript答案都被接受，因为我需要这样做才能工作：）

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

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"));

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

3 个答案: