Question

我有一个固定高度和宽度的div，里面我的文字正在改变。有时它可能是一两个字，有时它可能是一个句子。我需要的是缩小字体大小，使文本适合该div。

Answer 1

我有一个想法并且它有效:)这是我的代码

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

        });

Answer 2

我遇到了类似的问题，这让我为此编写了自己的插件。一种解决方案是使用缩小到拟合方法，如user54316所述。但是，如果您必须适合多个项目或关注性能，例如，在调整窗口大小时，请查看jquery-quickfit。

它测量并计算文本的每个字母的大小不变量，以适合并使用它来计算下一个最适合文本的字体大小。

计算被缓存，这使得它在处理多个文本或必须多次适合文本时（例如，在窗口大小调整时）非常快（在第二次调整大小时几乎没有性能损失）。我认为在你的情况下它会很完美。

你只需要打电话

$('#yourid').quickfit()

更改文本后。

Production example, fitting 14x16x2 texts

Answer 3

尝试在em中提供font-size：

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

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

Answer 4

有一个jQuery插件：FitText.js

此处有网址：https://github.com/davatron5000/FitText.js

以下是一个示例：http://jsfiddle.net/martinschaer/sRvB9/

函数fitText（）接收一个参数，您需要使用该参数“播放”以获得所需的结果。此外，它在调整窗口大小时调整文本大小;如果你需要在（例如）调整div的大小时调整文本大小，你应该为它添加一对JS行;）

Answer 5

$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 6

你可以通过定义像......这样的字体大小来实现。

.small {font-size: 0.8em}

你可以在这里看到效果working demo

使文本适合div

6 个答案: