HTML content display limited lines

How to display news items which comes from database on a web page limiting the number of lines to 3.

The news content is in html format for example

<p><span style="font-family: HelveticaNeue LT 77 BdCn;"><span style="font-size: large;">The average house price&amp;nbsp;up by 0.3% in May</span></span></p>
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;">compared to the previous month <br />but fell 1.2% compared to May 2010</span></span></p>
<p><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"></span></span><span style="font-family: HelveticaNeue LT 55 Roman;"><span style="font-size: small;"><a href="http://www.nationwide.co.uk/hpi/historical/May_2011.pdf" title="Nationwide House Price Index">Nationwide House Price Index</a></span></span></p>

How can i display first three lines only from the above html news by using java script/css and append ... at the end.

I tried by sett开发者_JAVA百科ing 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.

I think that the most reliable way to do this would be to set the line-height property (to whatever looks best to you), then setting the height property to 3 times the value you used for the line-height property. Then, just use the overflow property accordingly, like you've said.

For example:

.newsItems {
  line-height: 1.2em;
  height: 3.6em;
  overflow: hidden;
}

If you know the height of the font, you can set the height of the div appropriately. The simple answer is to set the height to 3em, though you'll probably still need some tweaking.