1,單行溢位，超出部分顯示…或者擷取。前提必須有寬度。
css：，擷取為clip;
width:300px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
實現方法：
適用範圍：
因使用了webkit的css擴充套件屬性，該方法適用於webkit瀏覽器及移動端；
注：1.-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的webkit屬性。常見結合屬性：
2.display: -webkit-box; 必須結合的屬性 ，將物件作為彈性伸縮盒子模型顯示 。
3.-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒物件的子元素的排列方式 。
p
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(rightright, transparent, #fff 55%);
background: -moz-linear-gradient(rightright, transparent, #fff 55%);
background: linear-gradient(to rightright, transparent, #fff 55%);
該方法適用範圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。
注：1.將height設定為line-height的整數倍，防止超出的文字露出。
2.給p::after新增漸變背景可避免文字只顯示一半。
3.由於ie6-7不顯示content內容，所以要新增標籤相容ie6-7（如：…）；相容ie8需要將::after替換成:after。
css設定文字省略號
用這幾行 可以設定出後面的省略號 如果出現這種情況 下面有字露出，可以加上line height 20px 這樣就好了 webkit line clamp number用於顯示的行數 用來限制在乙個塊元素顯示的文字的行數。為了實現該效果，它需要組合其他的webkit屬性 display webkit...
關於文字省略號 css篇
一 單行文字省略 width value white space nowrap overflow hidden text overflow ellipsis 二 多行文字省略 display webkit box display moz box white space pre wrap word w...
css 實現文字省略號 單行多行
在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠，造成折行的問題，產品會要求說根據寬度展示，超出部分用點號代替 做這種效果的時候會遇到單行展示和多行展示 單行示例 ellipsis single overflow hidden text overflow ellipsis white spac...