<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="row"> <div class="col-md-12"> <h1>Read More using height limit</h1> <div class="row"> <div class="col-md-4"> <div class="list-group"> <div class="list-group-item more"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet, nunc <b>eget laoreet sagittis, quam ligula sodales orci, congue imperdiet eros tortor ac lectus. Duis eget nisl orci. Aliquam mattis purus non mauris blandit id luctus felis conv</b>allis. Integer varius egestas vestibulum. Nullam a dolor arcu, ac tempor elit. Donec. </div> <div class="list-group-item"> Duis nisl nibh, egestas at fermentum at, viverra et purus. Maecenas lobortis odio id sapien facilisis elementum. Curabitur et magna justo, et gravida augue. Sed tristique pellentesque arcu quis tempor. </div> <div class="list-group-item"> consectetur adipiscing elit. Proin blandit nunc sed sem dictum id feugiat quam blandit. Donec nec sem sed arcu interdum commodo ac ac diam. Donec consequat semper rutrum. Vestibulum et mauris elit. Vestibulum mauris lacus, ultricies. </div> </div> </div> </div> </div> </div>

.more { display:block; overflow:hidden; padding-bottom: 10px; }

$(function() { var collapsedSize = '50px'; $('.more').each(function() { var pT = parseInt($(this).css('padding-top').replace(/px/,'')); var lH = parseInt($(this).css('line-height').replace(/px/,'')); collapsedSize = ((lH*2)+pT)+'px'; var h = this.scrollHeight; console.log(h); var div = $(this); if (h > 30) { div.css('height', collapsedSize); div.after('<a id="more" class="item" href="#">Read more</a><br/>'); var link = div.next(); link.click(function(e) { e.stopPropagation(); if (link.text() != 'Collapse') { link.text('Collapse'); div.animate({ 'height': h }); } else { div.animate({ 'height': collapsedSize }); link.text('Read more'); } }); } }); });