Auto Resize Font-Size

Auto Resize Font-Size

I'm working on some code to automatically change the font-size based not only on $(window).resize() but also to ensure it the text doesn't wrap, and instead shrinks to the size of its container. I do not care if the size ends up at 4...just so long as it does not wrap.

My HTML:
  1.               <div id="UL16" class="bracketSize L b16">
  2.                     <ul class="tlist">
  3.                         <li class="theTeams t16">1 upLeft upLeft upLeft</li>
  4.                         <li class="theTeams t16">2 upLeft</li>
  5.                         <li class="theTeams t16">3 upLeft</li>
  6.                         <li class="theTeams t16">4 upLeft</li>
  7.                         <li class="theTeams t16">5 upLeft</li>
  8.                         <li class="theTeams t16">6 upLeft</li>
  9.                         <li class="theTeams t16">7 upLeft</li>
  10.                         <li class="theTeams t16">8 upLeft</li>
  11.                         <li class="theTeams t16">9 upLeft</li>
  12.                         <li class="theTeams t16">10 upLeft</li>
  13.                         <li class="theTeams t16">11 upLeft</li>
  14.                         <li class="theTeams t16">12 upLeft</li>
  15.                         <li class="theTeams t16">13 upLeft</li>
  16.                         <li class="theTeams t16">14 upLeft</li>
  17.                         <li class="theTeams t16">15 upLeft</li>
  18.                         <li class="theTeams">16 upLeft</li>
  19.                     </ul>
  20.                 </div>
Here is my .js attempt
 //it works great with the resize, but the text wraps if the input is too long
  1. $(document).ready(function () {
        //set the originals
        var originalWinHeight = $(window).height();
        var originalWinWidth = $(window).width();

        //set the original font size
        var originalFontSize = getOriginalFontSize();

        //set the ratio of change for each size change
        var ratioOfChange = 50;

        //set the font size using jquery
        $("#Full").css("font-size", originalFontSize);

        $(window).resize(function () {
            //get the width and height as the window resizes
            var winHeight = $(window).height();
            var winWidth = $(window).width();

            //get the difference in width
            var widthDiff = winWidth - originalWinWidth;

            //check if the window is larger or smaller than the original
            if (widthDiff > 0) {
                //our window is larger than the original so increase font size
                var pixelsToIncrease = Math.round(widthDiff / ratioOfChange);

                //calculate the new font size
                var newFontSize = originalFontSize + pixelsToIncrease;

                //set new font size
                $("#Full").css("font-size", newFontSize);
            }
            else {
                //our window is smaller than the original so decrease font size
                var pixelsToDecrease = Math.round(Math.abs(widthDiff) / ratioOfChange);

                //calculate the new font size
                var newFontSize = originalFontSize - pixelsToDecrease;

                //set the new font size
                $("#Full").css("font-size", newFontSize);
            }
        })
    });

    getOriginalFontSize = function () {
        var windowWidth = $(window).width();
        var thisFontSize = windowWidth / 50;
        if (thisFontSize > "16") { thisFontSize = "16"; }
        return thisFontSize;
    }



















































I have messed with the css property white-space:nowrap;, That stops wrapping, but simply overruns, rather than shrink down. Any help you have would be appreciated.