单行、多行文本溢出显示省略号

记录一波~

单行文本溢出显示省略号，大家都知道的耶。隐藏溢出部分，置文本不换行，溢出部分应省略号代替，完美搞定（语言搞定法）。下面看代码：

overflow: hidden;

white-space: nowrap;

text-overflow:ellipsis; 

重点看看多行文本的溢出显示省略号的方法，因为实际开发当中遇到很多这样子的需求，所以本人在此记录一下，毕竟人老了记性是真的不好了呀（好记性不如烂笔头）。请看代码：

display: -webkit-box; //必须结合的属性，将对象作为弹性盒子模型显示
-webkit-box-orient: vertical; //必须结合的属性，设置或检索弹性盒子对象的子元素排列方式
-webkit-line-clamp: 3; //显示在一个块元素显示的文本行数，为了实现效果需要结合其他webkit属性
overflow: hidden;

这个方法有局限性，因为使用了webkit的css扩展属性，所以适用于webkit浏览器和移动端。其他浏览器可以利用js和伪类（::after）来实现呀~