JSFiddle - React, Tailwind, and code Playground
HTML
<span style="font:bold 14px Verdana;">LONGESTW</span>
<span style="font:bold 42px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;"> </span>
<span style="font:bold 24px Verdana;">ORD</span>
<span style="font:bold 14px Verdana;"> </span>
<span style="font:bold 24px Verdana;">regular</span>
<span style="font:bold 14px Verdana;"> </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>
JavaScript
$(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);
});