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并在最后附加...来显示上述html新闻的前三行。

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

Answer 1

我认为最可靠的方法是设置line-height属性（对任何看起来最合适的属性），然后将height属性设置为您用于的值的3倍line-height属性。然后，只需相应地使用overflow属性，就像你说的那样。

例如：

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

Answer 2

如果您知道字体的高度，则可以适当地设置div的高度。简单的答案是将高度设置为3em，尽管您可能仍需要进行一些调整。

HTML内容显示有限的行

2 个答案: