我想知道是否有HTML/CSS只有方法来检测（或至少，显示/隐藏一些元素与伪类等）采取行动时，元素的内容溢出（仅在垂直方向）。是的，我知道它可以做，我知道如何做到这一点（我不需要JS例子，请参考），我只想知道是否有一个聪明的方法，没有任何 JavaScript。检测是否溢出没有javascript

我试图显示一个“更多...”按钮，只有当溢出时才会出现，并试图在没有JS的情况下实现此功能。

2011-08-21 Can Poyrazoğlu

元素是否有固定的高度？ –

@Knu：你有想法吗？ – thirtydot

@dot kinda是的。 – Knu

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/
（免责声明 - 只有谷歌浏览器）

来源

2011-08-22 00:19:34

对我来说看起来不错。我希望在我们收到OP回复时删除我的答案。编辑：除了它杀死下降的事实，请参阅：http://jsfiddle.net/thirtydot/MrAKv/10/ – thirtydot

@thirtydot好点。谢谢。通过调整行高即可轻松修复：http://jsfiddle.net/MrAKv/15/。 –

这是一个不错的和聪明的例子，但不幸的是，它不适用于变化的高度。容器将填充用户的浏览器高度，它只是一个项目列表，每行一个，然后继续，显示出可能（但不是必须）溢出浏览器高度的大量条目。我认为这是问题的根源。 –

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

来源

2011-08-22 01:02:57 NGLN

我需要变高度。它实际上是用户的浏览器高度，他们可以调整大小。 –

检测是否溢出没有javascript

回答

100％的高度解决方案

原液

相关问题