使文本適合div

Question

我有一個具有固定高度和寬度的div，並且內部有變化的文本。 有時可能是一兩個單詞，有時可能是一個句子。 我需要縮小字體大小，以使文本適合該div。

Answer 1

我有一個類似的問題，這使我為此編寫了自己的插件。 一種解決方案是使用緊縮貼合方法，如user54316所述。 但是，如果您必須容納多個項目或擔心性能，例如在調整窗口大小時，請查看jquery-quickfit 。

它測量並計算要適合文本的每個字母的大小不變性測量，並使用它來計算將文本適合容器的下一個最佳字體大小。

計算被緩存，這使得它在處理多個文本或必須多次適應文本時（例如，在窗口調整大小時）非常快（向前第二次調整大小幾乎不會影響性能）。 我認為這對您來說很完美。

你只需要打電話

$('#yourid').quickfit()

更改文本后。

生產示例，適合14x16x2文字

Answer 2

我有一個主意，它起作用了:)這是我的代碼

        $('li').each(function () {
            while ($(this).outerHeight() > 25) {
                var currentFontSize = $(this).css("font-size");
                $(this).css("font-size", (parseFloat(currentFontSize) - 1) + "px");
            }

        });

Answer 3

有一個jQuery插件：FitText.js

此處的URL： https : //github.com/davatron5000/FitText.js

這是一個示例： http : //jsfiddle.net/martinschaer/sRvB9/

函數fitText（）接收一個參數，您需要使用該參數“播放”以獲得所需的結果。 同樣，它在調整窗口大小時也調整了文本大小。 如果在（例如）調整div大小時需要調整文本大小，則應為此添加一對JS行；）

Answer 4

$text.css('font-size', "100px");
$text.css('line-height', "100px");
var foo= $div.width()    / $text.width();
var bar= $div.height()   / $text.height();

if(foo < bar) {
    foo=Math.floor(foo*100) +"px";
    $text.css('font-size', foo);
    $text.css('line-height', foo);
} else {
    bar=Math.floor(bar*100) +"px";
    $text.css('font-size', bar);
    $text.css('line-height', bar);
}

//centralizing text, top and left are defined as 50% on the CSS, optional
$text.css('margin-left', -$text.width()  /2 + "px");
$text.css('margin-top',  -$text.height() /2 + "px");

一個小注意事項是，如果div本身更改大小，則需要調用此函數。 您可以將此代碼綁定到div的resize事件。

Answer 5

嘗試在em中指定字體大小：

http://clagnut.com/blog/348/

http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 6

您可以通過定義字體大小來實現……

.small {font-size: 0.8em}

你可以在這里看到效果工作演示