JSFiddle - React, Tailwind, and code Playground

by yuriy636

HTML

<div id="yellow" class=" resizable">
    
        WILL_NOT_LINE_BREAK will line break
    


</div>

CSS

#yellow {
            width: 400px;
            height: 50px;
            background: yellow;
            font-family: Arial;
            font-size: 26px;
}

JavaScript

// http://stackoverflow.com/a/17386788/3499595
function longestWord(string) {
    var str = string.split(" ");
    var longest = 0;
    var word = null;
    for (var i = 0; i < str.length; i++) {
        if (longest < str[i].length) {
            longest = str[i].length;
            word = str[i];
        }
    }
    return word;
}


// http://stackoverflow.com/a/15302051/3499595
 $.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

 $(function () {
 	var allText = $(".resizable").text();
  var longestWordInText = longestWord(allText);
  var longestWordWidth = $.fn.textWidth(longestWordInText, $(".resizable").css('font'));
  
   $(".resizable").resizable({
     minWidth: longestWordWidth
   });
 });