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数字以获得更准确的宽度，但代价是处理时间。

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

2 个答案:

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

2 个答案:

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