Find the width of the widest word in the html block

Question

The goal is to find the width of the widest word here.

The text is a sentence consisting of words with different fonts, as shown in the image.

the html looks like :

<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> 

So, here the 3rd word is the widest. Any ideas? Everything is html and we can use any thing ( jquery,ES5 techniques etc).

Answer 1

I think this pretends to be a solution.

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