jQuery / Javascript Element height alway returns 0
<p>I'm trying to split some paragraphs into their respective line at each line break. My code seems to break when trying to recover the height of the element, it always returns '0'.</p>

<p>My function:</p>

<pre><code>function getLines(element){
    words = element.text().split('');
    width = element.width();
    lines = [];
    hiddenElement = jQuery('&lt;p width ="'+ width +'px", visible ="true"&gt;&lt;/p&gt;');
    hiddenElement.text('i'); //add character to get height
    height = hiddenElement.height();
    alert(height);
    hiddenElement.empty();
    jQuery.each(words, function(i, val) {
      lineText = hiddenElement.text();
      hiddenElement.text(lineText + this);
        if(hiddenElement.height() &gt; height) {
            lines.push(lineText);
            hiddenElement.text(this);
        }
   });
    alert(hiddenElement.height());
    alert(lines);
    jQuery('body').append(hiddenElement); // to see results
}
</code></pre>

<p><a href="http://jsfiddle.net/zQUhV/2/" rel="nofollow">http://jsfiddle.net/zQUhV/2/</a> - function called via <code>up arrow key</code></p>

<p>Why does this return 0 rather than the height of the element?</p>
