一,单行省略
单行省略,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; 用于处理元素内的空白,即只在一行显示,这样就不会留空白。