检测是否有溢出与没有javascript [英] Detecting whether there's overflow or not WITHOUT javascript

问题描述

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

我试图显示一个更多...按钮，只有当有溢出时，才会出现，并尝试实现这个没有JS如果可能。 p>

解决方案

100％height solution

％height - 因此，当内容尝试占用整个网页时，您会看到一个更多...链接。在所有浏览器中都可正常使用。

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

我只为添加另一行控件使用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/

免责声明 - 仅在Google Chrome中测试）

I want to know if there's a HTML/CSS only way to detect (or at least, show/hide some elements with pseudo classes etc.) to take action when an element's contents overflow (in vertical only). Yes, I KNOW it can be done and I KNOW how to do it (I don't need JS examples on this, PLEASE), I just want to know if there's a clever way, without any javascript.

I'm trying to show a "more..." button which will appear ONLY when there's overflow, and trying to achieve this without JS if possible.

解决方案

100% height solution

Here's a version of this solution for 100% height - so when content tries to take up more than the whole page, you get a "more..." link. This works fine in all browsers.

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

I've used JavaScript only for the "Add another row" control - for demo purpoes. There is no JavaScript used in the actual solution.

Caveat:

• Since the height of the user's browser is variable, there is no way to ensure that lines won't appear cut in half at the point of the "more" link, or that the "more" link will be completely visible.

Original solution

Make the container element overflow: hidden and give it a max-height. Then put your "more" link inside that container element, with position: absolute so it's just inside that max-height. Now the "more" link won't be shown unless the content inside the container pushes the container to its max-height.

If you're careful with your line-heights then you should be able to prevent any lines from being chopped in half.

Example:
Just enough text: http://jsfiddle.net/nottrobin/MrAKv/17/
Too much text: http://jsfiddle.net/nottrobin/MrAKv/16/

The shorter version will only work in browsers that support max-height:
http://caniuse.com/#search=max-height

If you need IE6 support, use this slightly less succinct solution:
http://jsfiddle.net/nottrobin/MrAKv/18/
(Disclaimer - only tested in Google Chrome)

这篇关于检测是否有溢出与没有javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！