大家應該都知道用text-overflow:ellipsis屬性來實現單行文本的溢出顯示省略號(…)。當然部分瀏覽器還需要加寬度width屬性。
| 1 |
overflow: hidden; |
|
| 2 | text-overflow: ellipsis; |
|
| 3 | white-space: nowrap; |
但是這個屬性並不支持多行文本溢出顯示省略號，這里根據應用場景介紹幾個方法來實現這樣的效果。
WebKit瀏覽器或移動端的頁面
在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，可以直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。
常見結合屬性：
display: -webkit-box;必須結合的屬性 ，將對象作為彈性伸縮盒子模型顯示 。-webkit-box-orient必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本
| 1 | overflow : hidden; |
| 2 | text-overflow: ellipsis; |
| 3 | display: -webkit-box; |
| 4 | -webkit-line-clamp: 2; |
| 5 | -webkit-box-orient: vertical; |
這個屬性比較合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器。
具體例子可以查看http://www.css88.com/webkit/-webkit-line-clamp/
跨瀏覽器兼容的方案
比較靠譜簡單的做法就是設置相對定位的容器高度，用包含省略號(…)的元素模擬實現；
例如：
| 1 | p { position:relative; line-height:1.4em; height:4.2em; overflow:hidden; } |
| 2 | p { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y; } |
這里注意幾點：
- height高度真好是
line-height的3倍； - 結束的省略好用了半透明的png做了減淡的效果，或者設置背景顏色；
- IE6-7不顯示
content內容，所以要兼容IE6-7可以是在內容中加入一個標簽，比如用<span class="line-clamp">...</span>去模擬； - 要支持IE8，需要將
::after替換成:after；
text-overflow省略號樣式總結
要想隱藏溢出內容同時又想讓過多內容以省略號樣式顯示，需要用到css overflow,和text-overflow樣式，同時避免文字自動換行我們使用html nobr標簽強制內容不換行，使用使用注意這幾個CSS樣式和HTML標簽配合使用才能達到多余文字內容出現省略號樣式，大家下來靈活運用多次實踐即可。
--over--