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

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

下面是一个使用带有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>

如果您只想显示更多内容的标识符，那么您可以使用纯CSS来实现这一点。我使用纯滚动阴影。诀窍在于使用background-attachment: local;。你的css看起来是这样的:

.scrollbox { overflow: auto; width: 200px; max-height: 200px; margin: 50px auto; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background: /* Shadow covers */ linear-gradient(white 30%, rgba(255,255,255,0)), linear-gradient(rgba(255,255,255,0), white 70%) 0 100%, /* Shadows */ radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)), radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%; background-repeat: no-repeat; background-color: white; background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px; /* Opera doesn't support this in the shorthand */ background-attachment: local, local, scroll, scroll; } <div class="scrollbox"> <ul> <li>Not enough content to scroll</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="scrollbox"> <ul> <li>Ah! Scroll below!</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>The end!</li> <li>No shadow there.</li> </ul> </div>

代码和示例可以在http://dabblet.com/gist/2462915上找到

你可以在这里找到解释:http://lea.verou.me/2012/04/background-attachment-local/。

元素可以垂直、水平或同时进行溢出。如果DOM元素被覆盖，这个函数将返回一个布尔值:

function isOverflown(element) {
  return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
}

function isOverflown(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; } var els = document.getElementsByClassName('demos'); for (var i = 0; i < els.length; i++) { var el = els[i]; el.style.borderColor = (isOverflown(el) ? 'red' : 'green'); console.log("Element #" + i + " is " + (isOverflown(el) ? '' : 'not ') + "overflown."); } .demos { white-space: nowrap; overflow: hidden; width: 120px; border: 3px solid black; } <div class='demos'>This is some text inside the div which we are testing</div> <div class='demos'>This is text.</div>

ES6例子:

const isOverflown = ({ clientWidth, clientHeight, scrollWidth, scrollHeight }) => {
    return scrollHeight > clientHeight || scrollWidth > clientWidth;
}

jquery的替代答案是使用[0]键来访问原始元素，如:

if ($('#elem')[0].scrollHeight > $('#elem')[0].clientHeight){