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...