Css h1 font size size wide

Question

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

Like this.

code:

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

Answer 1

Try this plugin.

http://fittextjs.com/

This is great for responsive text.

EDIT:

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

Answer 2

I found a plugin called bigtext, which works very well, will wait for comments.

https://github.com/zachleat/BigText

Answer 3

One possible solution with 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(); } })