HTML內容顯示有限行

如何顯示其來自於數據庫中的網頁限制的行數到3HTML內容顯示有限行

的新聞內容是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腳本/ css只顯示上面的html新聞的前三行，並追加...在最後。

我試着通過在div元素上設置高度和溢出來包裝上述新聞內容，但這會根據字體或瀏覽器裁剪文本的底線。

來源

2011-09-28 Jemsworld

我認爲最可靠的方法來做到這將是設置line-height屬性（到任何看起來最好的給你），然後height屬性設置爲3次，你用於line-height屬性的值。然後，就像你說的那樣，相應地使用overflow屬性。

例如：

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

來源

2011-09-28 20:42:40

我建議你使用字體相對值（例如：line-height：1.2em; height：3.6em;'）。現在，如果您更改字體大小（或者用戶覆蓋字體選項），它仍然會按照您希望的方式工作。 – Lee

我無法控制新聞內容，因爲用戶可以使用任何字體或大小或粗體等。 – Jemsworld

如果整件事是一種字體和字體大小（用戶可以選擇），那麼使用'em'應該可以工作。我更新了我的示例以反映這一點，因爲@李的建議可能更正確一般。如果用戶可以在中間句子的任何一點更改字體和字體大小，那麼準確地使用純CSS就難以實現三行（我認爲不可能）。 –

如果您知道字體的高度，就可以適當地設置div的高度。簡單的答案是將高度設置爲3em，儘管您可能仍需要進行一些調整。

來源

2011-09-28 20:42:54

HTML內容顯示有限行

回答

相關問題