如果實現單行文字的溢位顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。
實現方法：
但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。
接下來重點說一說多行文字溢位顯示省略號，如下:
實現方法：
適用範圍：因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；
注：-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
實現方法：
適用範圍：該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注：將height設定為line-height的整數倍，防止超出的文字露出。
給p::after新增漸變背景可避免文字只顯示一半。
由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
前端 單行文字溢位省略與多行文字溢位省略
text ellipsis示例 效果 multiline ellipsis示例 慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上，屬予作文以記之。予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯，朝暉夕陰，氣象萬千，此則岳陽樓之大觀...
css實現單行 多行文字超出顯示省略號
使用text overflow ellipsis屬性 text overflow clip ellipsis string clip 修剪文字。ellipsis 顯示省略符號來代表被修剪的文字。string 使用給定的字串來代表被修剪的文字。p使用了webkit的css擴充套件屬性，該方法適用於we...
css 實現單行 多行文字溢位省略號顯示
單行實現 css部分 overflow hidden text overflow ellipsis white space nowrap white space 設定如何處理元素內的空白 值為nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 標籤為止。效果如下 多行實現 css部分 dis...