title: How can I automatically re-size an html tag so that the text fits on a single line and does not need to wrap?
body: <p>I have a typical web store and each product has an  tag with the product title. Some of the product names are very long and cause the tag to word wrap up to three lines. </p>
  
  <p>Is there a way, either in pure CSS or javascript or jQuery to dynamically change the font size of the tag so that it is the maximum size necessary to fill the parent div but -without- requiring a word wrap?</p>
  
  <p>So far I've tried using jQuery to add a series of classes based on the number of chars in the text, but that has been far from precise. For example:</p>
  
  <p>jQuery:</p>
  
  <pre><code>$('h1').each( function() { 
     if( $(this).html().length &gt; 15 )
         $(this).addClass('long');
   }
   etc...
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>       h1.entry-title.long 
         { font-size: 2.2em; letter-spacing: normal; }
  </code></pre>
  
  <p>Can anyone suggest a more elegant/accurate solution?</p>