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.
Thank.
source to share
I think it does the silence that 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 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: https://jsfiddle.net/chimos/83ra9ysh/25/
source to share