在固定高度的父div內為子div添加省略號

Question

我有一個固定高度的父div，其中隱藏了溢出並且其中有多個子div，如何在可見的子div之后顯示省略號以傳達更多的div。

到目前為止，這是我的代碼：

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

由於第三個和第四個孩子是隱藏的，我想在第二個div之后顯示點

另外，子div的數量可能會有所不同，因此我只想在父div溢出時顯示點

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>