像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度，并将其与容器的高度进行比较。如果大于，则可以在代码中添加“显示更多”按钮。

更新:增加了在容器顶部创建“Show More”按钮的代码。

你应该考虑的另一个问题是JS不可用。考虑渐进增强或优雅降级。我建议:

默认添加“更多按钮” 默认添加溢出规则 隐藏按钮，并在JS中进行CSS修改后比较元素。scrollHeight到element.clientHeight

像http://jsfiddle.net/Skooljester/jWRRA/1/这样的代码有用吗?它只是检查内容的高度，并将其与容器的高度进行比较。如果大于，则可以在代码中添加“显示更多”按钮。

更新:增加了在容器顶部创建“Show More”按钮的代码。

下面是一个使用带有overflow:hidden和JQuery height()的包装器div来确定元素是否已溢出的方法，以测量包装器和内部内容div之间的差异。

outers.each(function () {
    var inner_h = $(this).find('.inner').height();
    console.log(inner_h);
    var outer_h = $(this).height();
    console.log(outer_h);
    var overflowed = (inner_h > outer_h) ? true : false;
    console.log("overflowed = ", overflowed);
});

来源:jsfiddle.net上的框架和扩展

我做了一个多部分的代码依赖演示上述答案(例如使用溢出隐藏和高度)，以及如何展开/折叠溢出项

例1:https://codepen.io/Kagerjay/pen/rraKLB(真正简单的例子，没有javascript，只是剪辑溢出项)

示例2:https://codepen.io/Kagerjay/pen/LBErJL(单个事件处理程序在溢出项上显示更多/无显示)

例3:https://codepen.io/Kagerjay/pen/MBYBoJ(多事件处理程序对溢出项显示更多/显示更少)

我在下面附上了例子3，我使用Jade/Pug，所以它可能有点啰嗦。我建议检查一下我已经使其更容易掌握的相互依赖。

// Overflow boolean checker function isOverflown(element){ return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } // Jquery Toggle Text Plugin $.fn.toggleText = function(t1, t2){ if (this.text() == t1) this.text(t2); else this.text(t1); return this; }; // Toggle Overflow function toggleOverflow(e){ e.target.parentElement.classList.toggle("grid-parent--showall"); $(e.target).toggleText("Show More", "Show LESS"); } // Where stuff happens var parents = document.querySelectorAll(".grid-parent"); parents.forEach(parent => { if(isOverflown(parent)){ parent.lastElementChild.classList.add("btn-show"); parent.lastElementChild.addEventListener('click', toggleOverflow); } }) body { background-color: #EEF0ED; margin-bottom: 300px; } .grid-parent { margin: 20px; width: 250px; background-color: lightgrey; display: flex; flex-wrap: wrap; overflow: hidden; max-height: 100px; position: relative; } .grid-parent--showall { max-height: none; } .grid-item { background-color: blue; width: 50px; height: 50px; box-sizing: border-box; border: 1px solid red; } .grid-item:nth-of-type(even) { background-color: lightblue; } .btn-expand { display: none; z-index: 3; position: absolute; right: 0px; bottom: 0px; padding: 3px; background-color: red; color: white; } .btn-show { display: block; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <p>Any grid-parent over 10 child items has a "SHOW MORE" button to expand</p> <p>Click "SHOW MORE" to see the results</p> </section> <radio></radio> <div class="wrapper"> <h3>5 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>8 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>10 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>13 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>16 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> <h3>19 child elements</h3> <div class="grid-parent"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="btn-expand">Show More</div> </div> </div>

使用js检查孩子的offsetHeight是否大于父母..如果是，使父溢出滚动/隐藏/自动你想要的，并在更多div上显示:block ..