jquery - 动态改变字体大小填充div，文本内容可以改变

Question

我一直在努力调整文本大小。我正在使用 Dark Sky 很棒的天气 api 将摘要文本返回到我的显示器。由于文字内容会随着天气的变化而变化，有时只有一两个字，有时会多出几个。

我的页面上有一个固定大小的 div，并且希望 api 响应始终尽可能大，但在 div 内的行空间中换行。我见过很多类似的例子和插件，但强制文本只占一行。

代码片段如下

    $(document).ready(function() {
       resize_to_fit();
    });

        function resize_to_fit() {
      var fontsize = $('div#outer div').css('font-size');
      $('div#outer div').css('font-size', parseFloat(fontsize) - 1);

        if ($('div#outer div').height() >= $('div#outer').height()) {
            resize_to_fit();
        }
      }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="outer" style="width:200px; height:200px; border:1px solid red;">
    <div>bad weather</div>

    </div>

上面是一个很好的例子，来自SO，但是当只有一两个单词时不会增加字体大小来填充div。谁能指出我增强上述代码以实现这一目标的方向？谢谢

Answer 1

你可以试试 font-size:260%

$(document).ready(function() {
       resize_to_fit();
    });

        function resize_to_fit() {
      var fontsize = $('div#outer div').css('font-size');
      $('div#outer div').css('font-size', parseFloat(fontsize) - 1);

        if ($('div#outer div').height() >= $('div#outer').height()) {
            resize_to_fit();
        }
      }

#outer{
font-size:260%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    <div id="outer" style="width:200px; height:200px; border:1px solid red;">
    <div>bad weather</div>

    </div>