您好,登錄后才能下訂單哦!
小編給大家分享一下使用css實現(xiàn)文字溢出省略號的方法有哪些,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
1.單行實現(xiàn)文字省略號
/*這里要顯示的設(shè)置寬度*/
overflow:hidden;
white-space:nowrap;
/*文字超出寬度則顯示ellipsis省略號*/
text-overflow:ellipsis;
width:100%;
2345截圖20181015145014.png
2.第幾行實現(xiàn)文字省略號
display:-webkit-box;
-webkit-box-orient:vertical;/*設(shè)置方向*/
-webkit-line-clamp:2;/*設(shè)置超過為省略號的行數(shù)*/
overflow:hidden;
使用webpack打包工具時,會忽視這個-webkit-box-orient屬性,這里修改成下面的寫法就可以了
display:-webkit-box;
overflow:hidden;
/*autoprefixer:off*/
-webkit-box-orient:vertical;
/*autoprefixer:on*/
-webkit-line-clamp:8;
text-overflow:ellipsis;
3.用js實現(xiàn)字數(shù)后加省略號
if(title.length>26){
title=title.substring(0,27)+"...";
}
4.換行word-break和word-wrap
white-space:normal(自動換行),當寫入的文字超過定義的寬度后會自動換行,但當寫入的數(shù)據(jù)是一堆沒有空格的字符或者字母或者數(shù)字時,超過容器的寬度時就會把容器撐大,不換行
這時可以用:word-break:break-all;word-wrap:break-word來解決
word-break:break-all在超過容器寬度時,若有一個單詞很長,則會將單詞截斷,分開寫
word-wrap:break-word在超過容器寬度時,若有一個單詞很長,則會將單詞放到下一行,而不對單詞進行截斷
word-break:normal|break-all|keep-all
normal:允許在字內(nèi)換行
break-all:允許在單詞內(nèi)換行
keep-all:只能在半角空格或連字符處換行。
word-wrap:normal|break-word
normal:允許內(nèi)容頂開指定的容器邊界
break-word:內(nèi)容將在邊界內(nèi)換行。如果需要,詞內(nèi)換行(word-break)也會發(fā)生
以上是“使用css實現(xiàn)文字溢出省略號的方法有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。