關於文字溢位的神坑

前端頁面顯示時，文字部分的文字如果太多，有可能會導致文字溢位，大大影響頁面的美觀度。本人在虛擬機器上做一個個人部落格時，遇到一個很詭異的問題，跟大家分享一下。
本來要這樣的效果：

結果卻得到了這樣的效果：

本人反應機敏，認為出現這種問題的原因很可能是css檔案中沒有有效地設定文字顯示的溢位屬性，也就是說overflow屬性沒有設定為：hidden狀態。於是趕緊查看了關於主頁文字顯示的css設定。
html中的相關程式碼是這樣的：

#此程式碼{{topic.content}}從資料庫中讀取顯示的文章的內容並且展示在首頁上。程式碼本身無誤。
<p class
 
="blogtext">{{topic.content}}</p>

按圖索驥，查詢到對應的css程式碼段為：

.blogtext { font-size: 14px; color: #566573; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; margin-top: 20px }

overflow屬性，給個特寫：

overflow: hidden; text-overflow: ellipsis;
 

沒問題啊？！！難道是執行中出現了偶然的小概率事件？！
然而反覆執行之後，仍然解決不了。
難道是因為虛擬機器出了問題，帶著這樣的懷疑，本人果斷放棄虛擬機器，從Chrome瀏覽器上重新訪問。
顯示結果是這樣子的：

搞定！這說明程式碼確實沒有問題！！難道真的是虛擬機器的問題？還是虛擬機器自帶的瀏覽器的原因？？？？？
宜將剩勇追窮寇，問題清晰了，度娘也就給力了。經過本人的不懈努力，終於找到了一個合理的解釋：

overflow: hidden 支援Internet Explorer, Safari, Chrome 和 Opera，
但FF（Foxfire）並不支援，不過可以通過Jquery來實現類似的效果。
而本人虛擬機器上自帶的瀏覽器果然是FF的！
 

那麼問題來了：在FF上怎麼解決呢？
方法如下：

通過Jquery來實現類似的效果：
1. 安裝Jquery外掛：jQuery ellipsis plugin
2. 呼叫方法：
	(1).$(document).ready(function() {
	(2). $('.ellipsis').ellipsis();
	
注意：
    該問題是由CSS相容標準不同而引起的，或者使用Css3標準下相容程式碼解決

至於效果好不好，自己試一下吧。更詳細的解決方案請訪問連結地址

方法來源連結