将文本适应到一个div中

Question

我有一个固定高度和宽度的div，里面包含着不断变化的文本。有时可能只有一个或两个单词，有时可能是一整句话。我需要的是缩小字体大小，使文本适应该div。

- emirkljucanin

---

你的 div 中有等宽字体吗？ - Joel Etherton

你应该检查我的答案以获得更好的性能。 - Hoffmann

Answer 1

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

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

        });

- emirkljucanin

---

我在获取包裹在具有显式宽度的 div 中的文本宽度时遇到了问题。我使用了此解决方案 --> https://dev59.com/tHI-5IYBdhLWcg3w-9wK#2771544 - davehale23

我必须说这个函数太慢了。更改CSS属性会导致DOM重新绘制。如果您需要调整许多元素的大小或定时器，它将拖慢您的网页速度。请查看我的答案，以获取更高效但仍然简单的解决方案。 - Hoffmann

Answer 2

我曾经遇到过类似的问题，这促使我编写了自己的插件。一种解决方案是使用缩小适应方法，就像用户54316所描述的那样。但是，如果您需要适应多个项目或关注性能，例如在窗口调整大小时，请查看jquery-quickfit。

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

这些计算被缓存，使其非常快速（从第二次调整大小开始几乎没有性能损失），当处理多个文本或需要多次适应文本时（例如在窗口调整大小时）非常有用。我认为它会在您的情况下完美地工作。

您只需调用

$('#yourid').quickfit()

在您更改了文本后。

生产示例，适合14x16x2文字

- chunks_n_bits

Answer 3

$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 事件上。

- Hoffmann

Answer 4

试着用em来设置字体大小：

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

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

- Catalin

Answer 5

有一个适用于此的jQuery插件：FitText.js

这是它的URL: https://github.com/davatron5000/FitText.js

这里有一个例子: http://jsfiddle.net/martinschaer/sRvB9/

函数fitText()接收一个参数，您需要“玩弄”它以获得所需的结果。此外，当窗口大小调整时，它会自动调整文本大小；如果您需要在（例如）调整div大小时调整文本大小，则应添加一对JS行来实现此功能;)

- Martin Schaer

---

这是用于调整窗口大小的代码，但它不允许将较长的字符串缩小以适应 div 内部。 - Jon Mitten

Answer 6

你可以通过定义字体大小来实现，例如......

.small {font-size: 0.8em}

你可以在这里查看效果 工作演示

- Vivek