2018-10-10(單行省略&多行省略)

一,單行省略

單行省略,css3有屬性可以實現。廢話不多說,直接貼代碼。


only1.png
only2.png
only3.png

二,多行省略

多行省略可以用-webkit-line-clamp屬性,但是這是個不規范屬性,并不在css草案中。是webkit瀏覽器或移動端(絕大部分是webkit內核)瀏覽器。需要結合display:-webkit-box; -webkit-box-oriden:vertical;一起使用。其中,若內容是英文,還需要結合word-break:break-all;屬性。


moreE_1.png
moreE_2.png
moreE_3.png

若是中文則不需要word-break:break-all;


moreC_1.png
moreC_2.png
moreC_3.png

三,借助after實現多行省略

after1.png
after2.png
after3.png

小知識點:word-break:break-all & word-wrap:break-word & white-space:nowrap;

1.word-break:break-all; 用于英文單詞,若單詞很長,容器剩余距離不夠,則折斷該單詞。
2.word-wrap:break-word; 用于英文單詞,若單詞很長,容器剩余距離不夠,則將整個單詞換行顯示。
3.white-space:nowrap; 用于處理元素內的空白,即只在一行顯示,這樣就不會留空白。

參考鏈接(https://www.cnblogs.com/mywaystrech/p/4929700.html)

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容