让content force DIV垂直增长直到达到max-height，然后水平增长

Question

我有一个 div 和一些文本。这个div有min-height、min-width、max-height和max-width。我想在环绕文本时优先考虑高度，这意味着直到能够拉伸 div 垂直（高度 < 最大高度），文本应均匀包裹以填充高度。然后如果达到最大高度，包装应该以填充宽度的方式排列，直到 max-width 允许这样做。如果同时达到 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/

让content force DIV垂直增长直到达到max-height，然后水平增长

Make content force DIV grow vertically until max-height is reached, and then grow horizontally

html

css

jquery

word-wrap