优化具有固定高度的div的宽度？ （即仍然适合文本的最小宽度）

Question

我有一个div，其中包含可变数量的文本和固定的高度。 如果没有固定的宽度，则宽度将自动为100％。 我可以估计div所需的宽度，但是由于文本并不总是相同，因此这并不总是有效。 每次都需要自动确定。 基本上，我希望div的宽度由内容决定。

简而言之，我的div就像

#a {
height:100px;
width:?;
}

考虑这些： http : //jsfiddle.net/ZE4Sy/2/

从本质上讲，这就是我的目标（尽管我是通过估算宽度来做到这一点的）。 每个div都有固定的高度，但文本量却不同。 在文字开始超过高度之前，我将宽度设置得尽可能小。

我只具有jquery / javascript的非常基础的知识，但我假设如果对此有解决方案，则可能涉及到这些。

谢谢您的帮助！

Answer 1

这里：

$('.box').each(function () { 
    var $box = $(this),
        width = $box.width(),
        $inner = $box.wrapInner('<div></div>').children().first();

    while (width > 0 && $inner.height() < $box.height()) $box.width(--width);  
    $box.width(++width);
});

现场演示： http ： //jsfiddle.net/ZE4Sy/6/

Answer 2

我遇到了类似的问题，但就我而言，有两个因素使ŠimeVidas的解决方案无法正常工作，即我的div中的内容包含HTML（带有边距的p标签等），并且我希望div突出到外部如有必要，包含div的可用宽度。 利用他的解决方案获得灵感，我想到了：

$('.box').each(function () { 
    $box = $(this);
    $inner = $box.wrapInner('<div></div>');
    while ($inner[0].scrollHeight > $box.height()) $box.width($box.width()+100);  
});

只是简单地使框变宽一点，直到内部div的高度不超过包含该框的那个。 您可以减少+100数字以获得更准确的宽度，但会浪费处理时间。