Jquery Expand Height with text overflow

Question

I'm trying to have a div's height expand automatically when its contained text overflows. Here is my code on JSfiddle. This isn't the exact environment I need this function for but it is the same concept. I just need the jQuery to work properly and switch the classes. Help appreciated.

<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');
}

Update: I guess I wasn't super specific, I have attached two images that show my issue. I do not need to just extend the height, but also the "line-height" css property as well. That's why I figured changing the class in JQ would work.

Answer 1

In response to the fiddle you linked in the comments (jsfiddle.net/4nfNE/6), you set a height and a min-height in the same block...

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;

Changing 'height' to 'min-height' and removing the existing 'min-height' works for the fiddle.

Answer 2

Remove your heightfix jQuery and css code (it isn't really necessary in this situation) and change height:30px; to min-height:30px;.

Working fiddle - http://jsfiddle.net/sqGkg/

Answer 3

In order to do that, you simply need the min-height property but min-height alone will not be enough. To be compatible across all browsers simply use this.

<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.