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

Question

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

我的页面上有一个固定大小 div，我希望 api 响应始终尽可能大，但在 space 行内换行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

有一种 CSS3 方法可以实现您指定的内容。您可以使用 视口单位 从 API 调用中获取文本，以根据固定的 div 调整大小。比方说你给了你的文本一个 id，#resize。代码如下所示：

#resize {
    font-size: 30px; //fallback
    font-soze: 3.5vw; //adjust till satisfactory.

}

这样，您就不必担心使用 javascript 调整文本大小。（节省加载时间！）

Pure CSS to make font-size responsive based on dynamic amount of characters

https://css-tricks.com/viewport-sized-typography/

https://medium.com/@mrsallee/pixel-free-css-66bddb327bb1

Answer 2

您可以尝试使用 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>

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

Dynamically change size of font to fill div, text content can change

css

jquery

font-size