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)