title: Jquery - Fit text into element with only letterspacing & word-spacing
body: <p>Is there a plugin for this? I have been screening of the internetz and found bigText, Justify, fitText, textFit but they all seem to work with the font-size which I dont want to do. I only want the text to fit inside a element with a defined width.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="title"&gt;
     &lt;h1&gt;One header that i pretty long&lt;/h1&gt;
     &lt;h2&gt;Sub-header that is shorter&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#title {
     width: 300px;
  }
  
  h1 {
     font-size: 3em;
  }
  
  h2 {
     font-size: 2em;
  }
  </code></pre>
  
  <p>The problem with the plugins that I've found so far is that the sub-header will be bigger in the end because it has a shorter amount of letters.</p>
  
  <p>I've found this solution but the problem is that it gives me a slightly unbalanced spacing, <a href="http://www.quora.com/Web-Development/How-to-justify-a-single-word-by-changing-letter-spacing-using-JQuery" rel="nofollow noreferrer">justify</a></p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>if(config.fonts_loaded){
              $(".title .justify").each(function(i, e) {
              var $t    = $(this);
              console.log($t.height());
              var text  = $t.text();
              var tLen  = text.length -1;
              var i     = 0;
              var letter;
              var ratio;
              //  We have the data we need to rebuild text. Lose original text.
              //
              $t.empty();
              while(i &lt;= tLen) {
                letter = $("&lt;span&gt;&lt;/span&gt;")
                .css({
                  "position" : "absolute"
                })
                .text(text.charAt(i));
                $t.append(letter);
                ratio = i / tLen;
                //  Place each character in its rational slot, retreating margin
  
                //  so as to stay within bounds (last character starts at 100% of width).
  
                //
  
                letter.css({
  
                  "left"      : (100 * ratio) + "%",
  
                  "margin-left" : -letter.width() * ratio
  
                });
  
                ++i
  
              }
  
            });
          }
  </code></pre>
  
  <p>Results in:
    <img src="https://i.stack.imgur.com/ULrYl.gif" alt="enter image description here"></p>