Search code examples
htmlcssheaderwidthfill

css h1 font-size as big as width


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

Like this.

enter image description here

code:

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

Solution

  • Try this plugin.

    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' });