Question

如果.content中的文字有一个长单词，.content高度设置为300px，如果短文本只删除高度，则可以使用CSS / jQuery。

Answer 1

使用max-height代替height：http://jsfiddle.net/SRtJ2/

请注意，您不能拥有多个ID相同的元素。我在示例中将两个div中的id="content"更改为class="content"。

使用jQuery作为不支持max-height的浏览器的变通方法：

$( function() {
    $.each( $( '.content' ), function() {
        if( $( this ).height() > 300) {
            $( this ).height( 300 );
        }
    });
});

Answer 2

将高度设置为自动：

h2 {
font:18px/30px Arial;
}

.content {
width:200px;
height:auto;
overflow:auto;
margin-bottom:20px;
border:1px solid #000;
max-height: 300px;
}

您可能也想设置max-height，因为很长的内容会非常广泛地扩展。

Answer 3

通过CSS，您可以使用max-height代替高度。但我不确定它是否适用于IE 6,7＆amp;也许在8。

所以另一种安全的方法是使用Jquery。

$(document).ready(function() {
    if($("#content p").html().length>573)
    {

        $("#content").height(300);
    }
});

参见JsFiddle http://jsfiddle.net/kSuS7/8/

Answer 4

如果我理解正确，您希望在文本大小上设置触发器，将“长”文本的高度设置为300px。

未经测试

var txtSize = $("#content").val().length;

if(txtSize > 300){
  $("#content").height('300px');
}

如何在CSS或jQuery中创建动态div高度

4 个答案: