title: HTML content display limited lines
body: <p>How to display news items which comes from database on a web page limiting the number of lines to 3.</p>
  
  <p>The news content is in html format for example</p>
  
  <pre><code>&lt;p&gt;&lt;span style="font-family: HelveticaNeue LT 77 BdCn;"&gt;&lt;span style="font-size: large;"&gt;The average house price&amp;amp;nbsp;up by 0.3% in May&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;span style="font-family: HelveticaNeue LT 55 Roman;"&gt;&lt;span style="font-size: small;"&gt;compared to the previous month &lt;br /&gt;but fell 1.2% compared to May 2010&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;p&gt;&lt;span style="font-family: HelveticaNeue LT 55 Roman;"&gt;&lt;span style="font-size: small;"&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style="font-family: HelveticaNeue LT 55 Roman;"&gt;&lt;span style="font-size: small;"&gt;&lt;a href="http://www.nationwide.co.uk/hpi/historical/May_2011.pdf" title="Nationwide House Price Index"&gt;Nationwide House Price Index&lt;/a&gt;&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>How can i display first three lines only from the above html news by using java script/css and append ... at the end.</p>
  
  <p>I tried by setting height and overflow on div element that wraps the above news content but that will crop the bottom line of text depending upon the font or browser.</p>