Question

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.

Answer 1

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)