如何自动调整文本大小以适应受约束的 Div？

微调受约束 Div 内的文本大小：自动解决方案

想象一下有一个带有 div 的背景图像并希望叠加自动调整字体大小以适合受限 div 的文本。这个问题寻求解决这个常见问题，在这里我们提供全面的答案。

jQuery 实现：分步指南

实现所需的效果因此，我们提出了一个基于 jQuery 的解决方案，如以下交互式示例所示：http://jsfiddle.net/MYSVL/2/。

我们首先创建一个包含文本内容的 div 容器：

<div>
<p>接下来，我们对 div 容器施加固定大小：</p>
<pre class="brush:php;toolbar:false">#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

要动态调整文本大小，我们使用以下 JavaScript代码：

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

此代码迭代地减小内部 div 的字体大小，直到文本适合容器 div 的指定高度，从而确保最佳效果有限空间内的可读性和内容显示。