如何在指定行数省略多余内容

想实现该功能有很多方法，目前我觉得最简单的一种是使用CSS3的text-overflow属性，当然如果有兼容性要求请勿使用。

语法：text-overflow:clip / ellipsis ;（默认clip）
clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。
ellipsis:当对象内文本溢出时显示省略标记(...)。

该语法需要搭配overflow和white-space属性使用

overflow:hidden
white-space:nowrap;

效果如下：

如果需要省略多行，则需要以下代码

display:-webkit-box;
-webkit-line-clamp: 3/*第几行裁剪*/
-webkit-box-orient:vertical;
white-space:normal;/*非常重要，一定要设定为normal或者不设置（默认normal）*/

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：

1. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
3. text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

转载自
https://blog.csdn.net/u013084331/article/details/50885631