是否可以確定HTML5 div標簽的最小寬度？

Question

假設我有一個簡短的內容

<div id="reginald">
    <span style="whitespace: no-wrap">Wrap me if you can!</span>
</div>

我如何找出該div的最小寬度是多少？

Answer 1

簡單：您暫時將其父對象的寬度設置得盡可能小，然后進行測量！

// Shrink the parent.
var oldParentWidth = $("#reginald").css("width");
$("#reginald").css("width", "1px");

// Measure the child.
var width = $("#reginald span").width();

// Put it back.
$("#reginald").css("width", oldParentWidth);

console.log(width);

另外，您可能white-space: nowrap ，因為所寫內容實際上確實可以包裝。

更新：這是一個小提琴來演示它： https : //jsfiddle.net/seanofw/2nakzqjf/

Answer 2

div的最小寬度取決於兩個因素，一個是其中的內容，即。 文本的長度，字體大小等，這使得很難確定div的最小寬度，因為內容可以更改，但是您仍然可以

var width = $("#reginald").width();

另一個因素是樣式表中設置的CSS屬性min-width，可以通過以下方式獲得：

var minWidth = $("#reginald").css("min-width");