/*單行溢位,顯示省略號，用text-overflow屬性，需要增加寬度*/
/*溢位隱藏*/
overflow: hidden;
/*隱藏的部分用...表示*/
text-overflow: ellipsis;
/*文字不能轉行*/
white-space: nowrap;
width: 244px;
效果圖：
方法一：
/*多行溢位,使用css的擴充套件屬性*/
/*溢位隱藏*/
overflow: hidden;
/*彈性盒模型顯示，講物件作為彈性伸縮盒子模型顯示*/
display: -webkit-box;
/*盒模型元素的排列方式，設定伸縮盒物件的子元素的排列方式*/
-webkit-box-orient: vertical;
/*顯示行數，限制塊元素顯示的文字行數，必須結合其他屬性*/
-webkit-line-clamp: 3;
方法二暫時沒測試，copy的別人的總結
另一種方法，適合各種終端，但有乙個bug：文字未超出行的情況下也會出現省略號,可結合js優化該方法。
**如下：
.text
.text::after
需要注意的事項：
1.將height設定為line-height的整數倍，防止超出的文字露出。
2.給p::after新增漸變背景可避免文字只顯示一半。
3.由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
CSS實現單行 多行文字溢位顯示省略號（ ）
如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援...
CSS實現單行 多行文字溢位顯示省略號（ ）
1 單行文字的溢位 overflow hidden text overflow ellipsis white space nowrap 2 多行文字的溢位 適用範圍 因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端 注 webkit line clamp用來限制在乙個...
CSS實現單行 多行文字溢位顯示省略號（ ）
如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來，當然還需要加寬度width屬來相容部分瀏覽。實現方法 overflow hidden text overflow ellipsis white space nowrap 效果 單行文字的溢位顯示省略...