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.

Improve this question
5
  • Does the element have a fixed height? Commented Aug 21, 2011 at 23:48
  • 1
    This seems like a silly requirement. Since that "More" button is best powered by JS, why not the rest, too? Commented Aug 22, 2011 at 0: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. Commented Aug 22, 2011 at 9:00
  • @sime vidas: unfortunately not. Commented Aug 22, 2011 at 9:00
  • please take a look at my 100% height solution below and see if you think it answers your problem. Commented Aug 23, 2011 at 9:40

2 Answers 2

Reset to default
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)

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

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
@thirtydot Good point. Thanks. Easily fixed by adjusting line-height though: jsfiddle.net/MrAKv/15.
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.
@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.
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
|
0

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

Improve this answer

2 Comments

I need variable height. it's actually the user's browser height, and they can resize.
Answers should not be just links. See How to Answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.