使内容强制DIV垂直增长，直到达到最大高度，然后水平增长 [英] Make content force DIV grow vertically until max-height is reached, and then grow horizontally

问题描述

我有一个文本的div。此div具有 min-height ， min-width ， max-height 和 max-width 。
我想在包装文本中区分高度的优先级，这意味着直到能够拉伸
的div垂直（height< max-height），文本应该均匀包装以填充高度。
然后如果达到了max-height，包装应该以填充宽度的方式排列，直到
max-width允许这样做。如果同时达到max-height和max-width，文字应该照常包装
。

不幸的是，我的文本没有包装， width < max-width ，我找不到一个方法让它
被高度包装。

解决方案

使用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  if （this.offsetHeight< this.scrollHeight）{
 dW = dW + i; 
 $（el）.css（{'width'：dW +'px'，'height'：maxH + }）; 
} 
} 
 
}）; 
 
}）; 
  

CSS：

 code> .weird {
 background：#eee; / *不需要* / 
 width：200px; 
 min-width：200px; 
 min-height：200px; 
 max-height：400px; 
 max-width：400px; 
 overflow：auto; 
 float：left; / *不需要* / 
} 
  

在这个例子中，你可以看到两个具有相同属性的DIV，但是这两个DIV的属性是相同的。包含文本的不同数量：
https://jsfiddle.net/chimos/83ra9ysh/25/

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.

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.

解决方案

I think it does moreless what you need, using 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.

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垂直增长，直到达到最大高度，然后水平增长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！