優化具有固定高度的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數字以獲得更准確的寬度，但會浪費處理時間。