I am attempting to make a div's height automatically expand when the text inside it overflows. You can view my code on JSfiddle. While this isn't the exact environment where I need this functionality, the concept remains the same. I just need the jQuery to function correctly and swap the classes. Any assistance would be greatly 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: To provide more clarity, I have included two images that illustrate my problem. It is not only about extending the height but also adjusting the "line-height" CSS property accordingly. This led me to believe that changing the class using jQuery would be the solution.