超出显示 ...

前端开发中经常需要用到这个功能，在固定区域内显示，超出部分影藏，用 ... 来代替
废话不多说直接上代码和效果图

1. 第一种是展示几行之后，展示...

display: -webkit-box;// 将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2;  // 限制在一个块元素显示的文本的行数
-webkit-box-orient: vertical;  // 设置或检索伸缩盒对象的子元素的排列方式， 超出之后显示...
overflow: hidden; // 超出隐藏

ellipsis.png

兼容.png

2. 还有一种是，只显示一行，超出显示...

overflow: hidden;/*超出部分隐藏*/
white-space: nowrap;/*不换行*/
text-overflow: ellipsis;/*超出部分文字以...显示*/