HTML内容显示有限的行

Question

如何在网页上显示来自数据库的新闻项目,将行数限制为3.

例如,新闻内容采用html格式

<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>

如何通过使用java script/css并在最后附加...来显示前面三行中的前三行.

我尝试通过在div元素上设置高度和溢出来包装上面的新闻内容但是会根据字体或浏览器裁剪文本的底线.

Answer 1

我认为最可靠的方法是设置line-height属性(对你来说最好看),然后将height属性设置为你用于line-height属性的值的3倍.然后,overflow就像你说的那样,只需相应地使用该属性.

例如:

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