1

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.

Can Poyrazoğlu
  • 33,241
  • 48
  • 191
  • 389
  • Does the element have a fixed height? – Šime Vidas Aug 21 '11 at 23:48
  • 1
    This seems like a silly requirement. Since that "More" button is best powered by JS, why not the rest, too? – Brock Adams Aug 22 '11 at 00:47
  • @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. – Can Poyrazoğlu Aug 22 '11 at 09:00
  • @sime vidas: unfortunately not. – Can Poyrazoğlu Aug 22 '11 at 09:00
  • please take a look at my 100% height solution below and see if you think it answers your problem. – Robin Winslow Aug 23 '11 at 09:40

2 Answers2

6

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)

Robin Winslow
  • 10,908
  • 8
  • 62
  • 91
  • 1
    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: http://jsfiddle.net/thirtydot/MrAKv/10/ – thirtydot Aug 22 '11 at 00:32
  • @thirtydot Good point. Thanks. Easily fixed by adjusting line-height though: http://jsfiddle.net/MrAKv/15/. – Robin Winslow Aug 22 '11 at 00:43
  • 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. – Can Poyrazoğlu Aug 22 '11 at 09:02
  • @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. – Robin Winslow Aug 22 '11 at 10:34
  • 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 – Can Poyrazoğlu Aug 23 '11 at 10:39
  • The 100% height solution works in all browsers I believe. Tested it in IE6. Glad I solved your problem :) – Robin Winslow Aug 23 '11 at 11:53
1

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

NGLN
  • 43,011
  • 8
  • 105
  • 200