Detecting whether there's overflow or not WITHOUT javascript

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.

Oriel

Does the element have a fixed height? – Episcopate

This seems like a silly requirement. Since that "More" button is best powered by JS, why not the rest, too? – Scrumptious

@brock: it is not a requirement, I want to stay away from javascript as much as possible, it just messes lots of things up, and use HTML/CSS (just like you'd design a WPF program declaratively using XAML and Bindings etc. unless you HAVE TO write code). more button is powered by JS since there's no other known method. i was asking if there's a non JS method to achieve what I want or not. – Mota

@sime vidas: unfortunately not. – Mota

please take a look at my 100% height solution below and see if you think it answers your problem. – Offensive

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)

Offensive

That looks good to me. I look forward to deleting my answer when we hear back from the OP. Edit: except for the fact that it kills descenders, see: jsfiddle.net/thirtydot/MrAKv/10 – Validity

@Validity Good point. Thanks. Easily fixed by adjusting line-height though: jsfiddle.net/MrAKv/15. – Offensive

this is a nice and clever example, but unfortunatelly, it won't work for variable height. the container will fill the user's browser height, it's just a list of items, one per line, and it goes on, showing a big numver of entries that will potentially (but not a must) overflow the browser's height. i think this is the root of the problem. – Mota

@canPoyrazoğlu - I've added a 100% height solution, which I hope covers your requirements. I do believe this is the best you'll be able to do without JavaScript. There is no way in CSS to detect the actual height of the page, or of any element, so you can't perform actual calculations or position elements based on variable heights. – Offensive

this is really nice, and this IS a solution to the problem, but i was just wondering the browser support for this, but yout link of max height also describes it well too which shows it is pretty supported :) thanks – Mota

The 100% height solution works in all browsers I believe. Tested it in IE6. Glad I solved your problem :) – Offensive

Answer 2

Here is one for fixed height containers: http://jsfiddle.net/NGLN/PC94w/

Rector

I need variable height. it's actually the user's browser height, and they can resize. – Mota

Answers should not be just links. See How to Answer. – Medicament