是否可以确定 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 属性最小宽度，可以作为

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