文字溢位我們經常用到的應該就是text-overflow:ellipsis了，相信大家也很熟悉，但是對於多行文字的溢位處理確接觸的不是很多，最近在公司群裡面有同事問到，並且自己也遇到過這個問題，所以專門研究過這個問題。

首先我們回顧一下以前實現單行縮略是可以通過下面的程式碼實現的（部分瀏覽器需要設定寬度）：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

WebKit核心瀏覽器解決辦法

首先，WebKit核心的瀏覽器實現起來比較簡單，可以通過新增一個-webkit-line-clamp的私有屬性來實現，-webkit-line-clamp是用來限制在一個塊元素顯示的文字的行數。 為了實現這個效果，它需要組合其他的WebKit屬性：

display: -webkit-box將物件作為彈性伸縮盒子模型顯示；
-webkit-box-orient設定或檢索伸縮盒物件的子元素的排列方式；
text-overflow: ellipsis用省略號“…”隱藏超出範圍的文字。

具體程式碼參考如下：

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

這個方法合適WebKit瀏覽器或移動端（絕大部分是WebKit核心的）瀏覽器，效果可以檢視：

https://www.98891.com/article-34-1.html

其他瀏覽器的解決方案

目前沒有什麼css的屬性可以直接控制多行文字的省略顯示，比較靠譜的辦法應該就是利用相對定位在最後面加上一個省略號了，程式碼可以參考下面：

p {
    position:relative;
    line-height:1.5em;
    /* 高度為需要顯示的行數*行高，比如這裡我們顯示兩行，則為3 */
    height:3em;
    overflow:hidden;
}
p:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding: 0 5px;
    background-color: #fff;
}
 

不過這樣會有一點問題：

需要知道顯示的行數並設定行高才行；

IE6/7不支援after和content，需要新增一個標籤來代替；

省略號的背景顏色跟文字背景顏色一樣，並且可能會遮住部分文字，建議可以使用漸變的png背景圖片代替。