I’ve been struggling with text resizing. I am using Dark Sky’s awesome weather api to return summary text to my display. As the text content can change with the weather, sometimes there are are one or two words, sometimes a few more.

I have a fixed size div on my page, and would like to the api response to always be as big as possible, but wrap across the line space within the div. I’ve seen many examples and plug-ins that do similar but force the text on to one line only.

Code below in snippet

```js
    $(document).ready(function() {
       resize_to_fit();
    });

        function resize_to_fit() {
      var fontsize = $('div#outer div').css('font-size');
      $('div#outer div').css('font-size', parseFloat(fontsize) - 1);

        if ($('div#outer div').height() >= $('div#outer').height()) {
            resize_to_fit();
        }
      }
```

```html
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="outer" style="width:200px; height:200px; border:1px solid red;">
    <div>bad weather</div>

    </div>
```

Above is a good example, from SO, but does not increase the font size to fill the div when there are only one or two words. Can anyone point me in the direction of enhancing the above code to achieve this?
Thanks