Make text size adjust to fit text in entire container

Question

My objective is to make my text take as much of the space within a container as possible without overflow. If there are only a few words, they would have a very large font size, inversely if there are several words it would result in a smaller size that still takes as much of the containers area as possible.

So if I had this HTML

<div id="container">
    <h1 class="textFill">Make this fit as large as possible in the container</h1>
</div>

and the container was 400 by 300px

#container {
    width: 400px;
    height: 300px;
    border: 1px solid blue;
}

I would want the text to fill the entirety of that space. So far I have this script.

function textFill() {
    $(".textFill").each(function() {
      var
        $text = $(this),
        $parent = $text.parent();

      var
        textW = $text.width(),
        parentW = $parent.width(),
        ratio = parentW / textW;

      var
        originalSize = parseFloat($text.css('font-size')),
        newSize = originalSize * (1 * ratio);

      $text.css("font-size", newSize);

    });    
  }

Here it all is in a http://jsfiddle.net/nz7h2858/41/

possible duplicate of [Font scaling based on width of container](http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container) — chrisp, May 30 '15 at 23:41
Not quite, those solutions don't scale the font to the maximum value without overflowing the container. — Chris, May 30 '15 at 23:46

score 1 · Answer 1 · answered May 30 '15 at 23:37

1

I would increase the font size until the element goes beyond its parent's bounds.

Then decrease the font size by one.

textFill();

$(window).resize(textFill);

function textFill() {
  var tf= $('.textFill');
  for(var i = 1 ; ; i++) {
    tf.css('font-size', i);
    if(tf.outerHeight(true) > tf.parent().innerHeight() ||
       tf[0].scrollWidth    > tf.width()
      ) {
      break;
    }
  }

  tf.css('font-size', i-1);
}

Fiddle

answered May 30 '15 at 23:37

Rick Hitchcock

35,202
5
48
79

Seems like the best solution since it uses a feedback loop to actually check. Otherwise it would require tricky calculations involving font size, line height, padding, etc. – Yogi May 31 '15 at 00:27

score 0 · Answer 2 · answered May 30 '15 at 23:29

http://jsfiddle.net/nz7h2858/42/

This seems to be working a majority of the time. Occasionally some text will go out of bounds, but only slightly. Hopefully it's enough to get you started!

Things to notice:

.textFill {
    display: inline;
}

Because h1 is a block element, it defaults to the full width of it's parent. So your ratio for width would always be 1:1.

Secondly, you need to also take into consideration the height. So:

textW = $text.width(),
textH = $text.height(),
parentW = $parent.width(),
parentH = $parent.height(),
ratio = (parentW + parentH) / (textW + textH);

This appears to break when the body font-size or font-family is set to some value. For example, the div isn't filled when body font size is 10px. And if body font size is 48px then the div line spacing grows, but the font is far too small. Perhaps the font size calculation needs some additional adjustments? — Yogi, May 31 '15 at 00:20

Make text size adjust to fit text in entire container

2 Answers2