調整大小固定大小的文本，以適合

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/