jquery - 使用 CSS 或 jQuery 仅水平扩展容器以防止垂直溢出

Question

好的，这就是我正在尝试做的事情。假设我有以下 HTML:

<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

以及以下 CSS:

#test {
    height: 100px;
    min-width: 100px;
}

现在，让我们假设上面 HTML 中的段落可以是可变长度的。或者可能有两段。这并不重要。我正在寻找的是一种 CSS 或 jQuery 方法，使 div 始终保持 100 像素高，并且最终宽度不少于 100 像素，但不宽比防止垂直溢出所必需的要多。

因此，如果内容足够短(比如一个单词)，div 的高度将为 100 像素，宽度为 100 像素。如果内容是整个段落，div 的高度仍为 100 像素，内容将垂直填充，而 div 将仅水平扩展足以防止溢出。

Answer 1

使用 while 循环计算内部段落的高度，并不断调整父 div 的宽度直到适合。

while ($('#test > p').height() > $('#test').height()) {
    $('#test').width($('#test').width() + 1); // or +5 or +10 for a faster result
}

http://jsfiddle.net/mblase75/MFHah/

警告:在某些情况下这可能会导致无限循环。