如何调整固定高度的DIV的内容

Question

考虑我们有一个固定高度的DIV。 如果没有定义width ，则内容将扩散到100％的宽度。 如何调整宽度以填充DIV。 绝对不能用CSS来实现，因此，我正在寻找Javascript解决方案。

在此示例中 ，文本分布在100％的宽度上，并在固定高度留下大量空白空间。 我需要通过javascript设置130px的宽度，以使内容适合整个DIV。 但是如何计算宽度？

注意：此值（130像素）是为示例文本估计的。 根据DIV的内容，javascript需要计算将内容适合DIV所需的宽度。

有什么方法可以估算DIV内容的2D大小？

CSS实际上是为了提高高度； 当我们有固定的宽度时，它会继续保持高度以填充DIV。 宽度也可以这样做吗？

澄清：如何在不知道宽度（我们有固定高度）的情况下垂直填充DIV？

Answer 1

如果我正确理解您的要求，则可以使用Javascript完成此操作。

诀窍是使用帮助程序<div>在该帮助程序中，浏览器可将内容流到特定宽度并查看其高度。 如果辅助对象<div>的高度大于外部<div>的高度，请调整宽度以进行补偿。

同时，外部的<div> overflow: hidden因此所有进行中的实验不会对您的页面布局产生不利的影响。

看到它在行动 。

Answer 2

这是另一种方法。虽然效率较低，但可能比我的其他答案更准确。

在这里查看示例：

基本上将宽度向下循环，直到达到所需的高度

<div id="AA">
    <div id='A'>
        I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i am, I dont know how wide i need to be
    </div>
</div>

CSS：

#AA {
    height: 300px;
    border: 1px solid black;
    width: 100%;
}

#A {
   display: inline;
}

剧本：

    height = $('#AA').height();
minWidth = 300;

currentWidth = $('#A').width();
currentHeight = $('#A').height();
stop = false;

if (currentWidth >= minWidth) {

    while (stop === false) {
        if (currentWidth >= minWidth) {
            newWidth = currentWidth - 1;
            $('#AA').width(newWidth);
            currentHeight = $('#A').height();
            currentWidth = $('#A').width();
            if (currentHeight < height) {
                stop = false;
            }
            else {
                stop = true;
            }
        }
        else {
            stop = true;
        }
    }
}