Question

我一直在努力调整文字大小。我正在使用Dark Sky的令人敬畏的天气api将摘要文本返回到我的显示器。由于文本内容可能会随着天气而变化，因此有时候会有一两个单词，有时还会有一些单词。

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

以下代码在代码段

中

＆＃13;

    <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>

＆＃13;

equals

＆＃13;

上面是一个很好的例子，从SO开始，但是当只有一两个单词时，不会增加字体大小以填充div。任何人都可以指出我在增强上述代码的方向来实现这一目标吗？感谢

Answer 1

您可以使用font-size:260%

尝试此操作

＆＃13;

$(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();
        }
      }

＆＃13;

#outer{
font-size:260%;
}

＆＃13;

<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>

＆＃13;

Answer 2

有一种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

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

2 个答案: