用css3讓溢出內容顯示省略號

css3現在越來越普及了。給我們前端人員也帶來了極大的便利。以前要實現讓溢出的內容顯示省略號還得通過js實現，現在完全可以用css代替之。

主要的代碼如下：

<style type= "text/css"> .test{-o-text-overflow:ellipsis;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:150px;} </style>

<p class="test">顯示不出用省略號顯示不出用省略號顯示不出用省略號顯示不出用省略號</p>

顯示效果如下：

這個屬性並須要與overflow:hidden;white-space:nowrap;width:150px;一起用才會有效果！！

對於單行的我們可以用text-overflow:ellipsis;來實現，那對於多行有，有什么辦法嗎？？當然有！巨人的肩膀很結實的說。。

duang~duang~duang~歡迎我們的多行用省略號的方法隆重登場！

-webkit-line-clamp：***

為毛要用“-webkit-”，因為，它是一個不規范的屬性，它沒有出現在 CSS 規范草案中。所以，盡量只在移動端使或在WebKit瀏覽器用它吧。后面的***就是表示你想顯示的行數，如果你想顯示兩行，就是2。用它的時候，還需要用到其他的webkit屬性。要實現這樣的效果的全部代碼應該是：

 

對於更多實現讓溢出內容顯示省略號的方法大家可以移步至張鑫旭博客，訪問如下鏈接即可：關於文字內容溢出用點點點(…)省略號表示