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

I have a div with some text. This div has min-height, min-width, max-height and max-width. I want to prioritize height in wrapping text, that means until there is an ability to stretch the div vertically (height < max-height), the text should be wrapped evenly to fill the height. Then if max-height is reached, the wrapping should be arranged in the way to fill width until max-width allows to do that. If both max-height and max-width is reached, text should be wrapped as usual.

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

Unfortunatelly, my text is not wrapped while width < max-width, and I can't find a way to make it be wrapped by height.

不幸的是,我的文字没有被包裹,而宽度 ,我找不到让它被高度包裹的方法。

Please someone, give me an advice.

请有人给我一个建议。

Thanks.

1 个解决方案

#1

I think it does moreless what you need, using javascript/jQuery:

我认为使用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*/
}

For this approach is needed to start defining a fixed width for the DIV, then the width incresses pregressively until there's no overflow or until reaches the max-width.

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

In this example you can see two DIVs with the same properties but containing different ammounts of text: https://jsfiddle.net/chimos/83ra9ysh/25/

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

#1