我一直在努力调整文字大小。我正在使用Dark Sky的令人敬畏的天气api将摘要文本返回到我的显示器。由于文本内容可能会随着天气而变化,因此有时候会有一两个单词,有时还会有一些单词。
我的页面上有一个固定大小的div,并且希望api响应始终尽可能大,但是在div中的行空间中换行。我见过许多类似的例子和插件,但只强制文本到一行。
以下代码在代码段
中
<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。任何人都可以指出我在增强上述代码的方向来实现这一目标吗? 感谢
答案 0 :(得分: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();
}
}
&#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;
答案 1 :(得分:0)
有一种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