只有當最大高度達到時，纔會增加CSS的寬度

Question

我想用最大高度和初始寬度創建一個div，並且僅當內容達到最大高度值時才增加寬度？沒有JavaScript可以做到嗎？

https://fiddle.jshell.net/zn77t0r1/

UPDATE：

如果沒有，如何輕鬆地用JS或jQuery的做呢？

Answer 1

如果你允許的jQuery，你可以做這樣的事情：

$(document).ready(resizeWidth()); //call function when page is loaded 
$(window).resize(resizeWidth()); //call function when page is resized 

function resizeWidth(){ 
    var maxHeight = $('.container').eq(0).css('max-height'); 
    maxHeight = maxHeight.split('px')[0];//remove px 
    var cWidth = $('.container').eq(0).width(); 
    var currHeight = $('div.container')[0].scrollHeight; 

    while(maxHeight < currHeight) 
    { 
     cWidth += 100; 
     $('.container').eq(0).css('width', cWidth + 'px'); 
     currHeight = $('div.container')[0].scrollHeight; 
    } 

} 

功能不斷加入到100像素的寬度，只要文本高於div的max-height。

jsfiddle

Answer 2

所以你必須知道你的div的高度是如何增加它的寬度的。

喜歡的東西

If (height >= max-height) //change width 

這是不可能的，只有CSS或HTML。 但如果你不介意使用jQuery，用jQuery很容易。

這應做到：

//call function when page is loaded 
$(document).ready(function(){ 
    resizeWidth(); 
}); 

//call function when page is resized 
$(window).resize(function(){ 
    resizeWidth(); 
}); 

function resizeWidth(){ 

    var maxHeight = 250; // your max-height in px 
    if ($('.container').height() >= maxHeight) { 
     $('.container').css('max-width', '400px'); 
    }else { 
     $('.container').css('max-width', '200px'); 
    } 
}