css h1字体大小和宽度一样大

Is it possible to tell a h1 to size the text so it fills the full 100% width of the element?

是否可以告诉h1设置文本的大小，使其填充元素的100%宽度?

Like this.

像这样。

code:

代码:

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

3 个解决方案

#1

Try this plugin.

试试这个插件。

http://fittextjs.com/

http://fittextjs.com/

It's great for responsive text.

它对于响应性文本非常有用。

EDIT:

编辑:

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

#2

I found a plugin called bigtext that works pretty well, will wait for comments though.

我发现了一个叫做bigtext的插件，它运行得很好，但是会等待评论。

https://github.com/zachleat/BigText

https://github.com/zachleat/BigText

#3

One possible solution with jQuery would be:

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

})