1

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

我试图显示一个“更多...”按钮，该按钮仅在溢出时出现，并尽可能在没有 JS 的情况下实现这一点。

4

2 回答 2

6

100%高度解决方案

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

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

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

警告：

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

原始解决方案

制作容器元素overflow: hidden并给它一个max-height. 然后把你的“更多”链接放在那个容器元素里面，position: absolute所以它就在里面max-height。现在，除非容器内的内容将容器推送到其max-height.

如果你小心你line-height的 s 那么你应该能够防止任何线条被切成两半。

示例：
足够的文本：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 中测试过）

于 2011-08-22T00:19:34.943 回答
1

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

于 2011-08-22T01:02:57.927 回答