使文本适合 div答案

【问题标题】：Fit text to a div使文本适合 div
【发布时间】：2019-05-21 11:28:44
【问题描述】：

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

【问题讨论】：

div 中有等宽字体吗？
你应该检查我的答案以获得更好的性能

【解决方案1】：

我有一个想法，它奏效了 :) 这是我的代码

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

        });

【讨论】：

+1 我在获取包含在具有明确宽度的 div 中的文本宽度时遇到问题。我使用了这个解决方案 --> stackoverflow.com/a/2771544/374866
不得不说这个功能实在是太慢了。更改 css 属性会导致 dom 重绘。如果您需要调整很多元素的大小或在计时器上，它会占用您的网页。检查我的答案以获得更有效但仍然简单的解决方案

【解决方案2】：

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

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

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

你只需要打电话

$('#yourid').quickfit()

在您更改文本之后。

Production example, fitting 14x16x2 texts

【讨论】：

【解决方案3】：

尝试在 em 中给出字体大小：

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

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

【讨论】：

【解决方案4】：

有一个 jQuery 插件：FitText.js

这里是网址：https://github.com/davatron5000/FitText.js

这是一个例子：http://jsfiddle.net/martinschaer/sRvB9/

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

【讨论】：

这是用于调整窗口大小，但不允许将较长的字符串缩小到适合 div 的大小。

【解决方案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 事件。

【讨论】：

【解决方案6】：

你可以通过定义字体大小来做到这一点......

.small {font-size: 0.8em}

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

【讨论】：