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/>