Question

我正在尝试让div的高度在其包含的文本溢出时自动展开。这是JSfiddle上的my code。这不是我需要此功能的确切环境，但它是相同的概念。我只需要jQuery正常工作并切换类。帮助赞赏。

<div class="box">hello</div>
<br>
<div class="box">text is too long</div>

.box {
height: 30px;
width: 50px;
background: #666;
}
.boxfix {
height: 60px;
width: 50px;
background: #666;
}

var heightCheck = $(".box").height();

if (heightCheck > 30) {
$('.box').removeClass('box').AddClass('boxfix');
}

更新：我想我并不是非常具体，我附上了两张显示我的问题的图片。我不需要只是扩展高度，也需要“line-height”css属性。这就是为什么我认为改变JQ中的类会起作用。

Answer 1

删除你的heightfix jQuery和css代码（在这种情况下不是必需的）并将height:30px;更改为min-height:30px;。

工作小提琴 - http://jsfiddle.net/sqGkg/

Answer 2

为了做到这一点，你只需要min-height属性，但仅min-height是不够的。要在所有浏览器中兼容，只需使用此功能。

<div class="box">hello</div>
<br/>
<div class="box">text is too long</div>

.box {
  min-height: 30px;
  height:auto!important; /* for modern browsers */
  height:30px; /* for old IE */
  width: 50px;
  background: #666;
}

Here's a fiddle.

Answer 3

回应你在评论中链接的小提琴（jsfiddle.net/4nfNE/6），你在同一个街区设置一个高度和一个最小高度...

color: #696969;
height: 23px;
line-height: 17px;
text-transform: uppercase;
text-decoration: none;
display: block;
padding-left: 6px;
margin-bottom: 12px;
letter-spacing:1px;
min-height: 36px;

将'height'更改为'min-height'并删除现有的'min-height'适用于小提琴。

Jquery使用文本溢出展开高度

3 个答案: