Utilizing CSS alone, the initial key is "overflow:hidden", however, if you specify a fixed height, all your elements will expand in the same way regardless of the amount of text they contain. Setting "height:auto" results in elements expanding to their correct heights but without animation support. Fortunately, there is a method that combines both using a bit of JavaScript - by leveraging element.scrollHeight, you can obtain the accurate height for all necessary elements.
if (document.getElementsByClassName("auto")) {
var autos = document.getElementsByClassName("auto");
for (var i=0; i<autos.length; i++) {
autos[i].addEventListener("mouseover", autoOver);
autos[i].addEventListener("mouseout", autoOut);
}
}
function autoOver() {
this.style.height = this.scrollHeight + "px";
}
function autoOut() {
this.style.height = "20px";
}
.auto {
display: block;
margin: 20px;
width: 400px;
height: 20px;
overflow: hidden;
transition: all .5s ease;
}
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="auto">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>