调整大小固定大小的文本，以适合

Question

我有一个<div>它是400px宽和100px高。我想把一个标题的长度变化，如果它足够长（即<div>将有50px的默认字体大小），它将在<div>中占用两行。我希望文本从50px开始，并且如果文本太长而无法放入两行的框中，文本会缩小。

我该如何解决这个问题？我一直在玩Javascript几个小时，但我无法想出或找到任何东西。我能找到的就是如何在一行上对文本进行操作。

Answer 1

你需要一些JavaScript来解决这个问题。 这是我的示例标记

<div style="width: 400px; border: 1px solid black;"> 
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit</span> 
</div> 

我给跨度显示值inline-block，所以我可以已淘汰其宽度。

然后下面的基于jquery的脚本会让它变暗，直到它有点太小。

$(function() { 
    var span = $('span'); 
    var fontSize = parseInt(span.css('font-size')); 

    do { 
     fontSize--; 
     span.css('font-size', fontSize.toString() + 'px'); 
    } while (span.width() >= 400); 
}); 

检查出的jsfiddle示范：http://jsfiddle.net/gEjTz/