使内容强制DIV垂直增长，直到达到最大高度，然后水平增长

Question

我有一个带有一些文字的div。 该div具有min-height ， min-width ， max-height和max-width 。 我想在包装文本时优先考虑高度，这意味着直到有能力垂直拉伸div（高度<max-height），文本应均匀包裹以填充高度。 然后，如果达到最大高度，则应以填充宽度的方式排列包裹，直到最大宽度允许这样做。 如果同时达到max-height和max-width，则应像往常一样包装文本。

不幸的是，我的文字没有被包裹，而width < max-width ，我找不到一种方法让它被高度包裹。

请有人给我一个建议。

谢谢。

Answer 1

我认为使用javascript / jQuery它无需你所需要的东西：

$(document).ready(function() {

    $('div.weird').each(function(){ 

        var el = $(this);
        var dW = +$(el).css('width').replace(/[^-\d\.]/g, '');
        var maxW = +$(el).css('max-width').replace(/[^-\d\.]/g, '');
        var maxH = +$(el).css('max-height').replace(/[^-\d\.]/g, '');

        var i;
        for (i=0; i+dW < maxW; i++) {
            if ( this.offsetHeight < this.scrollHeight ) {
                dW = dW+i;
                $(el).css({'width': dW+'px', 'height': maxH+'px'});
            }
        }

    });

});

CSS：

.weird {
    background: #eee; /*not needed*/
    width: 200px;
    min-width: 200px;
    min-height: 200px;
    max-height: 400px;
    max-width: 400px;
    overflow: auto;
    float: left; /*not needed*/
}

为此，需要开始为DIV定义固定宽度，然后宽度逐渐减小，直到没有溢出或达到最大宽度。

在此示例中，您可以看到两个具有相同属性但包含不同文本的DIV： https ： //jsfiddle.net/chimos/83ra9ysh/25/