jquery - Jquery用文本溢出扩展高度

Question

我试图让 div 的高度在其包含的文本溢出时自动扩展。这是我在 JSfiddle 上的代码。这不是我需要此功能的确切环境，但它是相同的概念。我只需要 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;
}

这是一个小提琴。

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;

将“高度”更改为“最小高度”并删除现有的“最小高度”适用于小提琴。