检测是否有溢出没有javascript

Question

我想知道是否有一种HTML/CSS唯一的方法来检测(或至少显示/隐藏一些具有伪类的元素等),以便在元素的内容溢出时采取行动(仅在垂直方向).是的,我知道它可以完成,我知道如何做到这一点(我不需要这方面的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-heights,你应该能够防止任何线被切成两半.

示例:
文字足够: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中测试过)