检测是否有溢出没有javascript

Question

我想知道是否有一种 HTML / CSS only 方式来检测（或者至少显示/隐藏一些带有伪类的元素等），以便在元素内容溢出时执行操作（在仅垂直）。是的，我知道它可以完成，我知道怎么做（我不需要这方面的JS例子，请），我只是想知道是否有一个聪明的方法，没有任何 javascript

我正在尝试显示一个“更多......”按钮，该按钮仅在出现溢出时出现，如果可能的话，尝试在没有JS的情况下实现此目的。

Answer 1

100％高度解决方案

这是100％高度的此解决方案的一个版本 - 因此当内容尝试占用超过整个页面时，您将获得“更多...”链接。这适用于所有浏览器。

http://jsfiddle.net/nottrobin/u3Wda/1/

我只将JavaScript用于“添加另一行”控件 - 用于演示purpoes。实际解决方案中没有使用JavaScript。

警告：

• 由于用户浏览器的高度是可变的，因此无法确保线条在“更多”链接点处不会显示为两半，或者“更多”链接将完全可见。

原始解决方案

制作容器元素overflow: hidden并为其指定max-height。然后将“更多”链接放在该容器元素中，并使用position: absolute，因此它位于max-height内。现在，除非容器内的内容将容器推送到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/
（免责声明 - 仅在谷歌浏览器中测试过）

Answer 2

这是一个固定高度的容器：http://jsfiddle.net/NGLN/PC94w/