title: Maximizing text inside an element with jQuery
body: <p>I'm doing a function that takes all elements with class="maximize_size" and maximize its content (text) as large as possible inside each element.</p>
  
  <p>I would be happy if I could do this with a css trick, but I didn't found how.</p>
  
  <p>So, I'm trying to do it with javascript/jquery... and I stucked in a point:</p>
  
  <pre><code>$(".maximize_size").each(function(){
      var element = $(this);
      var content = element.contents();
  
      var raiseContent = $("&lt;div&gt;&lt;/div&gt;");
      content.wrap(raiseContent);
  
      var currentSize = 10;
      while (currentSize &lt; 150) {
          raiseContent.css({"font-size": currentSize + "px"});
          console.log(raiseContent.height() + " : " + element.height());
          if (raiseContent.height() &gt; element.height())
              break;
          currentSize++;
      }
  
      element.css({"font-size": currentSize + "px"});
      content.unwrap();
  });
  </code></pre>
  
  <p>When I use <em>console.log(raiseContent.height())</em> it shows <em>always 0</em> !!!</p>
  
  <p><a href="http://jsfiddle.net/hfvvvuab/" rel="nofollow">FIDDLE here.</a></p>
  
  <p>And for that reason my break-condition inside the while never occurs.</p>
  
  <p>I would be happy if you could give me some direction.</p>
  
  <p>Thanks for your time.</p>