html - css h1 字体大小与宽度一样大

Question

是否可以告诉 h1 调整文本大小，使其填充元素的 100% 宽度？

像这样。

代码：

<h1>FOO</h1>
<h1>BAAR</h1>

Answer 1

试试这个插件。

http://fittextjs.com/

它非常适合响应式文本。

编辑：

jQuery("#element1").fitText(1.2, { minFontSize: '20px', maxFontSize: '540px' });
jQuery("#element2").fitText(1.2, { minFontSize: '40px', maxFontSize: '340px' });

Answer 2

我发现一个名为 bigtext 的插件效果很好，不过会等待评论。

https://github.com/zachleat/BigText

Answer 3

使用 jQuery 的一种可能解决方案是：

var cs=$("#content").width();
$("h1").each(function(){
var hs=$(this).width();
while(hs<cs)
{
    $("h1").css("font-size",hs+0.01+"px");
    var hs=$(this).width();
}
while(hs>cs)
{
    $("h1").css("font-size",hs-0.01+"px");
    var hs=$(this).width();
}

})