overflow: hidden;text-overflow:ellipsis;
white-space: nowrap;
當然還需要加寬度width屬來相容部分瀏覽。
以上為單行文字溢位*****>
以下為多行文字溢位
display: -webkit-box;-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
適用範圍：
因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；
注：
1、-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：
2、display:-webkit-box;必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。
3、-webkit-box-orient 必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式。
法2.
div div:after 不要只顧著吃，要注意胃口，此方法有個弊端 那就是 【未超出行的情況下也會出現省略號】 ，這樣會不會很挫！！！ 沒辦法，只能結合js 進行優化該方法了。
注：1、將height設定為line-height的整數倍，防止超出的文字露出。
2、給p::after新增漸變背景可避免文字只顯示一半。
3、由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
CSS實現單行 多行文字溢位顯示 的總結
效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...
css 實現單行 多行文字顯示
1.單行顯示文字，超出顯示省略號，很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示，限制行數，超出顯示省略號，如下實現 width 200px...
css 處理 單行 多行 文字溢位
1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性，...