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中进行一些研究，但在这里你去了：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JavaScript代码的作用：

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

Snippet doens工作 - JSFiddle：https://jsfiddle.net/yuriy636/awse5gmf/7/

尝试更改CSS中的字体样式，看看它是如何工作的。

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

1 个答案: