Dynamically resize text to fill div [duplicate]

Answer 1

My guess is, this is not the kind of thing you can do with CSS. There isn't any kind of notion of percentage in fonts (as far as I know). You'll probably need to use Javascript.

Answer 2

As I said this may be a dupe of

Auto-size dynamic text to fill fixed size container.

The OP did a jQuery plugin for that means, you can download it here

It doesn't seem to up to date though!

Good luck!

Answer 3

You can use FitText.js (github page) to solve this problem. Is really small and efficient compared to TextFill. TextFill uses an expensive while loop and FitText don't.

Also FitText is more flexible (I use it in a proyect with very special requirements and works like a champ!).

HTML:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

You also can set options to it:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

CSS:

#responsive_headline {
   width: 100%;
   display: block;
}

And if you need it, FitText also has a no-jQuery version.