title: How can I calculate the width of the widest word in a div?
body: <p>I have a quite problematic task, I'd like to calculate the <code>width</code> of the <strong>widest word</strong> in my div, so I can set a <code>min-width</code> with javascript on a resizable div.</p>
  
  <p>I tried working on something, I managed to get the longest word, unfortunately not the widest and I also failed to get his width.</p>
  
  <p>Fiddle : <a href="https://jsfiddle.net/Lindow/oayddb8w/3/" rel="nofollow noreferrer">https://jsfiddle.net/Lindow/oayddb8w/3/</a></p>
  
  <p><strong>JavaScript :</strong> </p>
  
  <pre><code>function longestWord(string) {
      var str = string.split(" ");
      var longest = 0;
      var word = null;
      for (var i = 0; i &lt; str.length; i++) {
          if (longest &lt; str[i].length) {
              longest = str[i].length;
              word = str[i];
          }
      }
      return word;
  }
  
  var test = document.getElementById("Test");
  var longest_word = longestWord(test.innerHTML); // test.innerHTML == 'dofkdspakdasdsakd,'
  var width = (longest_word.clientWidth + 1) + "px"; // 'NaNpx'
  alert(longest_word);
  </code></pre>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;div id="Test"&gt;
    abcdefghijklmn, opqrstuvwxyzAB
    ddoafkpdsfk, 
    dsapdlasèd. CDEFGHIJKLMNO,
    dofkdspakdasdsakd, PQRSTUVWXYZ
  &lt;/div&gt;
  </code></pre>
  
  <p>Any suggestion ? The issue here is not to get the width of all the words, but just the widest word in a bunch of text, which change the problematic.</p>
  
  <hr>
  
  <p><strong>UPDATE :</strong></p>
  
  <p>This post helped me : <a href="https://stackoverflow.com/questions/12501171/find-the-width-of-the-widest-word-in-the-html-block">Find the width of the widest word in the html block</a></p>
  
  <p>I have to put every word in <code>&lt;span&gt;</code> tag and check through them which one is the widest according their fontFamily and fontSize.</p>