Question

我想制作一个具有最大高度和初始宽度的div，并且只有在内容达到最大高度值时才增加宽度？没有JavaScript可以做到吗？

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

更新：

如果没有，如何使用JS或jQuery轻松完成？

Answer 1

所以你必须知道你的div的高度是什么来增加它的宽度。

像

这样的东西

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

仅使用css或html无法实现。但是如果你不介意使用它，那么用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');
    }
}

Answer 2

如果你允许使用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;
    }

}

只要文本高于div max-height，该函数就会不断向宽度添加100px。

jsfiddle

CSS仅在达到最大高度时增加宽度

2 个答案: