不使用 javascript 检测是否存在溢出
我想知道是否有一种 仅 HTML/CSS 方法来检测（或至少显示/隐藏一些带有伪类等的元素），以便在元素内容溢出（仅垂直）时采取行动。是的，我知道它可以完成并且我知道如何做到这一点（我不需要这方面的 JS 示例，请），我只是想知道是否有一个聪明的方法，没有任何 javascript 。
我试图显示一个“更多...”按钮，该按钮仅在溢出时才会出现，并且如果可能的话，尝试在没有 JS 的情况下实现此目的。
I want to know if there's a HTML/CSS only way to detect (or at least, show/hide some elements with pseudo classes etc.) to take action when an element's contents overflow (in vertical only). Yes, I KNOW it can be done and I KNOW how to do it (I don't need JS examples on this, PLEASE), I just want to know if there's a clever way, without any javascript.
I'm trying to show a "more..." button which will appear ONLY when there's overflow, and trying to achieve this without JS if possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
100% 高度解决方案
这是此解决方案的 100% 高度版本 - 因此，当内容试图占据超过整个页面时，您会得到一个“更多...”链接。这在所有浏览器中都可以正常工作。
http://jsfiddle.net/nottrobin/u3Wda/1/
我只使用过 JavaScript用于“添加另一行”控件 - 用于演示目的。实际解决方案中没有使用 JavaScript。
警告：
原始解决方案
使容器元素
overflow:hidden并给它一个max-height。然后将“更多”链接放入该容器元素内，并使用position:absolute使其位于该max-height内。现在，除非容器内的内容将容器推至其最大高度，否则不会显示“更多”链接。如果您小心使用
line-height，那么您应该能够防止任何行被切成两半。示例：
足够的文字：http://jsfiddle.net/nottrobin/MrAKv/17/
文本过多： http://jsfiddle.net/nottrobin/MrAKv/16/
较短版本仅适用于支持
max-height的浏览器：http://caniuse.com/#search=max-height
如果您需要 IE6 支持，使用这个稍微不太简洁的解决方案：
http://jsfiddle.net/nottrobin/MrAKv/18/
（免责声明 - 仅在 Google Chrome 中测试）
100% height solution
Here's a version of this solution for 100% height - so when content tries to take up more than the whole page, you get a "more..." link. This works fine in all browsers.
http://jsfiddle.net/nottrobin/u3Wda/1/
I've used JavaScript only for the "Add another row" control - for demo purpoes. There is no JavaScript used in the actual solution.
Caveat:
Original solution
Make the container element
overflow: hiddenand give it amax-height. Then put your "more" link inside that container element, withposition: absoluteso it's just inside thatmax-height. Now the "more" link won't be shown unless the content inside the container pushes the container to itsmax-height.If you're careful with your
line-heights then you should be able to prevent any lines from being chopped in half.Example:
Just enough text: http://jsfiddle.net/nottrobin/MrAKv/17/
Too much text: http://jsfiddle.net/nottrobin/MrAKv/16/
The shorter version will only work in browsers that support
max-height:http://caniuse.com/#search=max-height
If you need IE6 support, use this slightly less succinct solution:
http://jsfiddle.net/nottrobin/MrAKv/18/
(Disclaimer - only tested in Google Chrome)
这是固定高度容器的一个： http://jsfiddle.net/NGLN/PC94w/
Here is one for fixed height containers: http://jsfiddle.net/NGLN/PC94w/