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.

font ranges 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).

Liked the question! +1 for the good puzzle and the added imagery — Yarneo, Sep 19 '12 at 19:03

score 1 · Accepted Answer · answered Sep 19 '12 at 19:20

1

I think this pretends to be a solution.

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

answered Sep 19 '12 at 19:20

Igor Shastin

2,878
2
25
38

maybe need to split space to determine word first. – Eric Yin Sep 19 '12 at 20:25
yes, also we can assume that "whitespace" is the only delimiter between words. like "12,000,22" is 1 word – sbr Sep 19 '12 at 20:31
I've updated my code, now it should be more flexible. http://jsfiddle.net/WtcEQ/13/ – Igor Shastin Sep 19 '12 at 20:51
UPD: Sorry, forgot to not change whitespace width between words. http://jsfiddle.net/WtcEQ/18/ – Igor Shastin Sep 19 '12 at 20:57
@IgorShastin Thanks. This is a strange case happening only in Safari + jsFiddle. If you try it on chrome or FF , seems to work fine with regu-ular as 780. Also, if you replace "-" char with some other like "_" it works fine. Also, if i try it without JSfiddle ( which is rendering the html on iframe and probably using "eval" ), it works fine – sbr Sep 23 '12 at 17:23
1

@sbr I tried it in Chrome 21. I think that problem is not with the JSFiddle, but with the white-space parameter. If page is too narrow, "regu-ular" breaks at the middle. Therefore in my fiddle I'm using white-space: nowrap to avoid this. – Igor Shastin Sep 23 '12 at 19:38
@IgorShastin Thanks. another thing to note is that "regu_ular" works ok. el.width() method is returning different values in case of "regu-ular" vs "regu_ular". – sbr Sep 24 '12 at 00:08

Selvakumar Arumugam · Answer 2 · 2012-09-19T21:33:24.243

Try below solution which basically iterates over all span and finds the longest word.

$(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/

Red Mercury · Answer 3 · 2021-12-04T19:02:29.230

You can use max-content to measure the pixel width of text.

function measureLongestWordPxWidth(template) {
  const measurer = template.cloneNode(true);
  measurer.style.setProperty("position", "position", "important");
  measurer.style.setProperty("visibility", "hidden", "important");
  measurer.style.setProperty("width", "max-content", "important");

  document.body.appendChild(measurer);
  const { width } = measurer.getBoundingClientRect();
  document.body.removeChild(measurer);
  return width;
}

const spans = [...document.querySelectorAll('span')];
const widths = spans.map(measureTextPxWidth);
const maxWidth = Math.max(...widths);
const maxWidthIndex = widths.indexOf(maxWidth)
const maxWidthText = spans[maxWidthIndex].innerText
  
document.querySelector('.output').innerText = 
  `"${maxWidthText}": ${maxWidth}px`

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

<div class="output"></div>

Find the width of the widest word in the html block

3 Answers3

Linked