Add ellipsis for child divs inside a fixed height parent div

Question

I have a parent div of a fixed height, overflow hidden and multiple child divs inside it, how do I show an ellipsis after the visible child divs to convey that there are more divs.

this is my code so far:

 .parent { display: inline-block; padding-left: 10px; padding-top: 7px; overflow: hidden; height: 50px; } .child { margin-right: 5px; color: #fff; border-radius: 3px; padding: 3px 8px; font-size: 12px; margin-bottom: 10px; background: red; } 

 <div class="parent"> <div class="child"> first </div> <div class="child"> second </div> <div class="child"> third </div> <div class="child"> fourth </div> </div> 

Here as the third and fourth child are hidden I want to show dots after second div

Also, the number of child divs could vary, so I want to show the dots only when the parent div overflows

Answer 1

 $('.showLessBtn').hide(); var fixedHeight = 50; var allParents = $('body').find('.parent'); for(var x = 0; x < allParents.length; x++){ var allChildsOfThisParent = $(allParents[x]).find('.child'); var parentHeight = 0; var childHeight = 0; parentHeight = $(allParents[x]).height(); for(var y = 0; y < allChildsOfThisParent.length; y++){ childHeight = childHeight + $(allChildsOfThisParent[y]).height(); } if(childHeight > parentHeight){ $(allParents[x]).find('.showMoreBtn').show(); }else{ $(allParents[x]).find('.showMoreBtn').hide(); } } $(".showMoreBtn").on('click', function(){ $(this).parent().parent().css({'height':'auto'}); var parentNewHeight = 0; parentNewHeight = $(this).parent().parent().height(); $(this).parent().find('.showLessBtn').css({'top':parentNewHeight+10}); $(this).hide(); $(this).parent().find('.showLessBtn').show(); }); $(".showLessBtn").on('click', function(){ $(this).parent().parent().css({'height':fixedHeight}); $(this).parent().find('.showMoreBtn').show(); $(this).hide(); }); 

 .parent { display: inline-block; padding-left: 10px; padding-top: 7px; overflow: hidden; height: 50px; width: 100px; } .showMoreBtn, .showLessBtn{ border: none; cursor: pointer; position: absolute; top: 60px; left: 55px; height: 10px; padding-top:0; background: transparent; } .child { padding: 2px; } .child>div{ color: #fff; border-radius: 3px; padding: 3px 8px; font-size: 12px; background: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div> <button class="showMoreBtn" type="button">.....</button> <button class="showLessBtn" type="button">...</button> </div> <div class="child"> <div> first </div> </div> <div class="child"> <div> second </div> </div> <div class="child"> <div> third </div> </div> <div class="child"> <div> fourth </div> </div> </div>