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/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments