title: Unable to shrink font size of user input text string (single line only) to text area/box and window resizes
body: <p>I am trying to shrink a single-line-only string of text in a textbox/area. See example below. Credit to <a href="https://stackoverflow.com/questions/6114300/shrinking-font-size-at-a-user-types-to-fit-in-an-input-using-javascript">Shrinking font-size at a user types to fit in an input using Javascript</a> for writing the code.</p>
  
  <p><a href="http://jsfiddle.net/hsdntz7y/4/" rel="nofollow noreferrer">http://jsfiddle.net/hsdntz7y/4/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// txt is the text to measure, font is the full CSS font declaration,
  // e.g. "bold 12px Verdana"
  function measureText(txt, font) {
    var id = 'text-width-tester',
      $tag = $('#' + id);
    if (!$tag.length) {
      $tag = $('&lt;span id="' + id + '" style="display:none;font:' + font + ';"&gt;' + txt + '&lt;/span&gt;');
      $('body').append($tag);
    } else {
      $tag.css({
        font: font
      }).html(txt);
    }
    return {
      width: $tag.width(),
      height: $tag.height()
    }
  }
  
  function shrinkToFill(input, fontSize, fontWeight, fontFamily) {
    var $input = $(input),
      txt = $input.val(),
      maxWidth = $input.width(),
      font = fontWeight + " " + fontSize + "px " + fontFamily;
    // see how big the text is at the default size
    var textWidth = measureText(txt, font).width + measureText(txt, font).width * .1; //padding to try to prevent cutoff letters?
    if (textWidth &gt; maxWidth) {
      // if it's too big, calculate a new font size
      // the extra .9 here makes up for some over-measures
      fontSize = fontSize * maxWidth / textWidth * .9;
      font = fontWeight + " " + fontSize + "px " + fontFamily;
      // and set the style on the input
      $input.css({
        font: font
      });
    } else {
      // in case the font size has been set small and 
      // the text was then deleted
      $input.css({
        font: font
      });
    }
  }
  
  $(function() {
    $('#my_input').keyup(function() {
      shrinkToFill(this, 100, "", "Georgia, serif");
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    font: 100px Georgia, serif;
    width: 80%;
    height: 300px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    border-width: 0;
    margin-right: 5%;
    margin-left: 5%;
    top: 25%;
  }
  
  *:focus {
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  
  &lt;input id="my_input" value="Type Here"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My issues are:</p>
  
  <ul>
  <li>When I type spaces in between words and add more words, the string's font
  doesn't shrink to fit the box.</li>
  <li>How can I established a maximum/minimum font size, where it stops
  shrinking/expanding?</li>
  <li>I would like to make the text area/box and shrinkage/expansion of
  the text font size to dynamically adjust when the window is
  resized.</li>
  <li>I want to make sure there are no cutoff letters at the beginning and
  end of the string. See picture.
  <a href="https://i.stack.imgur.com/63cAG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/63cAG.png" alt="enter image description here"></a></li>
  </ul>
  
  <p>Any help would be very much appreciated. I been researching and working on this for hours and figured someone more knowledgeable than me could show me in a few minutes.</p>
  
  <p>Thank you for you time.</p>