找到html块中最宽字的宽度

Question

目标是在这里找到最宽词的宽度。

文本是由具有不同字体的单词组成的句子，如图所示。

html看起来像：

<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;">&nbsp;</span>
<span style="font:bold 32px Verdana;">w</span>
<span style="font:bold 96px Verdana;">id</span>
<span style="font:bold 64px Verdana;">est</span> 

所以，这里的第三个词是最宽的。有任何想法吗？一切都是HTML，我们可以使用任何东西（jquery，ES5技术等）。

Answer 1

我认为这假装是一种解决方案。

http://jsfiddle.net/WtcEQ/4/

Answer 2

尝试以下解决方案，它基本上遍历所有跨度并找到最长的单词。

$(function () {
    var max = 0, sum = 0, lword = '', mword = '';

    var $span = $('span');
    $.each($span, function (idx, el) {

        var elTxt = $(el).text().trim();

        if (elTxt) {
            sum += $(this).width();
            lword += $(this).text();
        }

       if (!elTxt || $span.length == (idx+1) ) {
            if (sum > max) {
                max = sum;
                mword  = lword;
            }
            sum = 0;
            lword = '';
        }
    });

    alert(mword + ' ' + max);
});

DEMO： http://jsfiddle.net/WtcEQ/32/