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

Question

我有一些短信。这个div有min-height，min-width，max-height和max-width。我想在包装文本中优先考虑高度，这意味着直到有能力垂直拉伸div (高度

不幸的是，当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定义一个固定的宽度，然后宽度会提前增加，直到没有溢出或达到最大宽度为止。

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