在日常處理文本的工作中，經(jīng)常會(huì)遇到需要對(duì)文本末尾進(jìn)行省略的需求
單行文本進(jìn)行省略比較簡單：
overflow:hidden;//將超出的部分隱藏
text-overflow:ellipsis;//超出部分用省略號(hào)顯示
white-space:nowrap;//空白處不換行
再根據(jù)需求是否設(shè)置寬高，這樣就能簡單實(shí)現(xiàn)單行文本的省略號(hào)
支持webkit的瀏覽器或移動(dòng)端
在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面，這個(gè)功能實(shí)現(xiàn)起來比較簡單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp 。
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。
常見結(jié)合屬性：
-
display: -webkit-box;必須結(jié)合的屬性 ，將對(duì)象作為彈性伸縮盒子模型顯示 。 -
-webkit-box-orient必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 。 -
text-overflow: ellipsis;，可以用來多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本 。
所以，當(dāng)文本超出兩行或以上時(shí)，需要展示末尾的省略號(hào)，這個(gè)時(shí)候需要用到
overflow:hidden;//將超出的部分隱藏
text-overflow:ellipsis;//超出部分用省略號(hào)顯示
display:-webkit-box;//將對(duì)象作為彈性伸縮盒子模型顯示
-webkit-box-orient:vertical;//從上到下垂直排列子元素（設(shè)置伸縮盒子的子元素排列方式）
-webkit-line-clamp:n;//這個(gè)屬性不是css的規(guī)范屬性，需要組合上面的兩個(gè)屬性，表示顯示的行數(shù)
overflow-wrap:break-word;// 內(nèi)容將在邊界內(nèi)換行。如果需要，單詞內(nèi)部允許斷行
其中比較關(guān)鍵的是后面三句，這三句需要組合使用。同時(shí)多行省略的white-space不再是nowrap，根據(jù)場(chǎng)景需求自行修改。這里還要注意，父容器的white-space會(huì)影響子容器，如果沒有效果可以看看是不是父容器設(shè)置了white-space
其他瀏覽器的兼容方案
比較常見的是利用設(shè)定好估計(jì)的寬高，然后在文本的末尾用"…"來覆蓋原來的文本。這中方法比較無奈，但是也算是中解決方案，可以預(yù)見的會(huì)遇到很多異常流的問題
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(/newimg88/2014/09/ellipsis_bg.png) repeat-y;
}
