CSS多行文本溢出省略顯示
文本溢出我們經(jīng)常用到的應(yīng)該就是text-overflow:ellipsis了拾氓，相信大家也很熟悉，但是對(duì)于多行文本的溢出處理確接觸的不是很多杀饵，最近在公司群里面有同事問到莽囤，并且自己也遇到過這個(gè)問題，所以專門研究過這個(gè)問題切距。
首先我們回顧一下以前實(shí)現(xiàn)單行縮略是可以通過下面的代碼實(shí)現(xiàn)的（部分瀏覽器需要設(shè)置寬度）：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
WebKit內(nèi)核瀏覽器解決辦法
首先朽缎，WebKit內(nèi)核的瀏覽器實(shí)現(xiàn)起來比較簡單，可以通過添加一個(gè)-webkit-line-clamp的私有屬性來實(shí)現(xiàn)谜悟，-webkit-line-clamp是用來限制在一個(gè)塊元素顯示的文本的行數(shù)饵沧。 為了實(shí)現(xiàn)這個(gè)效果，它需要組合其他的WebKit屬性：
display: -webkit-box 將對(duì)象作為彈性伸縮盒子模型顯示赌躺；
-webkit-box-orient 設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式；
text-overflow: ellipsis 用省略號(hào)“…”隱藏超出范圍的文本羡儿。
具體代碼參考如下：
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
這個(gè)方法合適WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的）瀏覽器礼患，效果可以查看：
其他瀏覽器的解決方案
目前沒有什么CSS的屬性可以直接控制多行文本的省略顯示，比較靠譜的辦法應(yīng)該就是利用相對(duì)定位在最后面加上一個(gè)省略號(hào)了，代碼可以參考下面：
p {
position:relative;
line-height:1.5em;
/* 高度為需要顯示的行數(shù)*行高缅叠，比如這里我們顯示兩行悄泥，則為3 */
height:3em;
overflow:hidden;
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
padding: 0 5px;
background-color: #fff;
}
效果如下：
不過這樣會(huì)有一點(diǎn)問題：
需要知道顯示的行數(shù)并設(shè)置行高才行；
IE6/7不支持after和content肤粱，需要添加一個(gè)標(biāo)簽來代替弹囚；
省略號(hào)的背景顏色跟文本背景顏色一樣，并且可能會(huì)遮住部分文字领曼，建議可以使用漸變的png背景圖片代替鸥鹉。
