Make the content strength of the DIV vertical until the maximum height is reached and then grow horizontally

I have a div with some text. This div has min-height

, min-width

, max-height

and max-width

. I want to prioritize the height in the wrapping of the text, this means that as long as it is possible to stretch the div vertically (height <max-height), the text should be wrapped evenly to fill the height. Then, if the maximum height is reached, the wrapper should be positioned to fill the width as long as max-width allows it. If the maximum and maximum widths have been reached, the text should be wrapped as usual.

Unfortunately my text is not wrapped, but width

< max-width

, and I cannot find a way to make this be wrapped in height.

Please, somebody give me some advice.



source to share

1 answer

I think it does the silence that you need using javascript / jQuery:

$(document).ready(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'});





.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 it is necessary to start defining a fixed width for the DIV, then the width is pre-expressed until an overflow occurs or until it reaches the maximum width.

In this example, you can see two DIVs with the same properties but different text values:



All Articles