title: How to create a "show more" button and specify how many lines of text can be initially shown
body: <p>I'm looking for a way to create a slide out 'show more' feature on my responsive site, which cuts off after <strong>two lines</strong> of a paragraph.</p>
  
  <p>I've achieved this before with a static website, by applying a set height to the container and using <code>overflow: hidden</code>, and then animating the height of the container.</p>
  
  <p>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 <code>height</code> might not cover two lines exactly.</p>
  
  <p>Please check out this jsFiddle: <a href="http://jsfiddle.net/XVAzU/" rel="noreferrer">http://jsfiddle.net/XVAzU/</a> if you need to demonstrate.</p>
  
  <p>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.</p>
  
  <p>Thanks for looking!</p>