JqueryUI -> 可调整大小 -> 将 `minWidth` / `minHeigth` 设置为 innerHtml 文本长度

Question

我使用 jqueryui.com/resizable，我的问题是，如果可以设置 <div id="yellow" class=" resizable"> 的最小宽度，innerHTML 文本仍将适合元素。

这是我的 JSFiddle 示例：https://jsfiddle.net/awse5gmf/

HTML：

<div id="yellow" class=" resizable">

        WILL_NOT_LINE_BREAK will line break

</div>

CSS：

#yellow {
            width: 400px;
            height: 50px;
            background: yellow;                 
        }

正如in this picture 所见，我可以将<div> 的大小调整为小于文本WILL_NOT_LINE_BREAK 的长度。我希望<div> 的最小宽度是<div> 仍然可以包含整个文本的宽度，这意味着最小宽度应该是不能换行的最长单词的宽度。

Answer 1

不得不对 SO 进行一些研究，但你可以这样做：

// 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
   });
 });

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

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


</div>

JavaScript 代码的作用：

1. 我在 SO 中找到的用于查找字符串中最长单词的函数。
2. 我在 SO 中找到的一个用于计算字宽的 jQuery 插件。
3. 主要功能：这里我们获取div的文本，然后我们在该文本中查找最长的单词，然后计算最长单词的宽度。最后，我们将该宽度应用于可调整大小的 minWidth 属性。

片段不起作用 - JSFiddle：https://jsfiddle.net/yuriy636/awse5gmf/7/

尝试同时更改 CSS 中的字体样式，看看它是否仍然有效。