I'm looking for a way to create a slide out 'show more' feature on my responsive site, which cuts off after two lines of a paragraph.
I've achieved this before with a static website, by applying a set height to the container and using overflow: hidden
, and then animating the height of the container.
But being responsive, the container squashes the text at different browser widths, so the text might take up more/less room. Also there may be different content above the paragraph each time pushing it down. So the setting height
might not cover two lines exactly.
Please check out this jsFiddle: http://jsfiddle.net/XVAzU/ if you need to demonstrate.
So I need to cut off after two lines of the paragraph, no matter what width the container is or what comes before or after that paragraph.
Thanks for looking!