在制作頁面時，有時會出現(xiàn)對文本采取截斷處理的需求：規(guī)定文本的長度，超出部分則截斷，并以省略號...替代
1、單行文本的截斷
單行文本的截斷需要用到的主要的一個屬性是：text-overflow
text-overflow: clip | ellipsis | string
| 屬性值 | 描述 |
|---|---|
| clip | 修剪文本 （默認(rèn)值，無其他省略標(biāo)記） |
| ellipsis | 顯示省略符號來代表被修剪的文本 |
| string | 使用給定的字符串來代表被修剪的文本。（大多數(shù)瀏覽器不支持，僅Firefox9及以上支持） |
當(dāng)然，僅僅使用這個屬性是無法實現(xiàn)效果的，單行文本實現(xiàn)截斷效果，就需要使文本不能換行（white-space: nowrap;），同時，將文本超出部分隱藏掉（overflow：hidden;），最后再使用 text-overflow: ellipsis;（文本溢出時顯示省略號標(biāo)記...）。
示例代碼如下：
.word_cut {
white-space: nowrap; /* 文本不換行 */
overflow: hidden;
text-overflow: ellipsis; /* 文本溢出時顯示省略號標(biāo)記... */
}
2、多行文本的截斷
上面所介紹的text-overflow屬性只作用于單行文本，在多行文本中是不起作用的，然而，多行文本的截斷效果也是一種常見的需求。下面，整理了其中一種實現(xiàn)方法：
使用-webkit-line-clamp屬性來實現(xiàn)，同時還需要與其他相關(guān)的屬性配合，示例代碼如下：
.word_cut {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
display: -webkit-box，表示將父級元素變?yōu)閺椥院心Ｐ?br> -webkit-box-orient屬性，設(shè)置子元素的排列方式，horizontal（默認(rèn)值，水平排列），vertical（垂直排列）
-webkit-line-clamp屬性，控制文本顯示的行數(shù)
從以上代碼中的 -webkit- 不難發(fā)現(xiàn)，這只適用于webkit內(nèi)核的瀏覽器，其他瀏覽器的低版本并不支持此屬性，IE更是11及以下都不支持，因此，兼容性不是特別好。不過，由于移動端的瀏覽器多數(shù)是webkit內(nèi)核，因此，此屬性更適用于移動端頁面。
