Javascript/jQuery function yields undefined in <IE8
<p>A short while back I asked a question here about how I could calculate when a heading was longer than one line within a given container, and subsequently wrap each of these lines in a <code>&lt;span&gt;</code>:</p>

<p><a href="http://stackoverflow.com/questions/3960336/use-javascript-jquery-to-determine-where-a-heading-breaks-to-the-next-line">Use Javascript/jQuery to determine where a heading breaks to the next line?</a></p>

<p>I chose an answer which worked great for me, at least until I checked in IE7 and IE6, in which all the headings handled by this script rendered as </p>

<p>"<strong>undefinedundefinedundefinedundefinedundefinedundefined</strong>[...]"</p>

<p>on the page. As I'm not really a JavaScript person (that's why I asked such a question in the first place), it's really tough for me to figure out where the problem is. I assumed an undefined variable or something, but I just can't seem to grasp it.</p>

<p>Can anyone help?</p>

<p>I'll repeat the code here, but please refer to the link above for context:</p>

<pre><code>$(function(){
  $h = $('.fixed').find('h3');
  $h.each(function(i,e){
    var txt = $(e).text();
    $th = $('&lt;h3 /&gt;').prependTo($(e).parent());
    var lh = $(e).text('X').height();
    $(e).text('');
    while (txt.length &gt; 0) {
        $th.text($th.text() + txt[0]);
        txt = txt.slice(1);
        if (($th.height() &gt; lh) || (txt.length &lt;= 0)) {
            var shc = $th.text().split(' ');
            var ph = shc.slice(0,-1).join(' ')+' ';
            if (txt.length &lt;= 0) { ph += shc.pop(); }
            $('&lt;span /&gt;').text(ph).appendTo($(e));
            $th.text(shc.pop());
        }
    }
    $th.remove();
  })
});
</code></pre>
