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");

是否可以确定HTML5 div标签的最小宽度？

2 个答案: