【问题标题】：Detecting whether there's overflow or not WITHOUT javascript在没有javascript的情况下检测是否有溢出
【发布时间】：2011-08-21 23:36:51
【问题描述】：

我想知道是否有一种 HTML/CSS only 方法来检测（或至少显示/隐藏一些带有伪类的元素等）以在元素的内容溢出时采取措施（在仅垂直）。是的，我知道它可以完成并且我知道如何去做（我不需要 JS 示例，请），我只想知道是否有一个聪明的方法，没有任何 javascript .

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

【问题讨论】：

元素有固定高度吗？
这似乎是一个愚蠢的要求。既然那个“更多”按钮最好由 JS 提供支持，为什么其余的也不行呢？
@brock：这不是要求，我想尽可能远离javascript，它只会把很多事情搞砸，并使用HTML/CSS（就像您使用 XAML 和绑定等声明式地设计 WPF 程序一样，除非您必须编写代码）。更多按钮由 JS 驱动，因为没有其他已知方法。我在问是否有非 JS 方法来实现我想要的。
@sime vidas：很遗憾没有。
请看看下面我的 100% 高度解决方案，看看您是否认为它可以解决您的问题。

【解决方案1】：

100% 高度解决方案

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

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

警告：

原解决方案

创建容器元素overflow: hidden 并给它一个max-height。然后将您的“更多”链接放在该容器元素中，使用position: absolute，这样它就在max-height 中。现在“更多”链接不会显示，除非容器内的内容将容器推送到其max-height。

如果你小心你的line-heights，那么你应该能够防止任何行被切成两半。

较短的版本仅适用于支持max-height的浏览器：
http://caniuse.com/#search=max-height

如果您需要 IE6 支持，请使用这个稍微不那么简洁的解决方案：
http://jsfiddle.net/nottrobin/MrAKv/18/
（免责声明 - 仅在 Google Chrome 中测试）

【讨论】：

这对我来说看起来不错。当我们收到 OP 的回复时，我期待删除我的答案。编辑：除了它会杀死后代，请参阅：jsfiddle.net/thirtydot/MrAKv/10
@thirtydot 好点。谢谢。不过可以通过调整 line-height 轻松修复：jsfiddle.net/MrAKv/15.
这是一个很好且聪明的例子，但不幸的是，它不适用于可变高度。容器将填充用户的浏览器高度，它只是一个项目列表，每行一个，并且它继续显示大量可能（但不是必须）溢出浏览器高度的条目。我认为这是问题的根源。
@canPoyrazoğlu - 我添加了一个 100% 高度的解决方案，希望能满足您的要求。我确实相信这是您在没有 JavaScript 的情况下所能做的最好的事情。 CSS 中无法检测页面或任何元素的实际高度，因此您无法根据可变高度执行实际计算或定位元素。
这真的很好，这是解决问题的方法，但我只是想知道浏览器对此的支持，但你的最大高度链接也很好地描述了它，这表明它得到了很好的支持:) 谢谢

【解决方案2】：

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

【讨论】：