文字超过一行省略号显示css代码  关键代码是下面几句：

white-space:nowrap;
overflow:hidden; 
text-overflow: ellipsis;

效果如图，缺点是只能是一行。

重点–多行溢出

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}

分析：overflow:hidden;text-overflow:ellipsis;这两句组合是必须的。去掉了不换行代码 white-space:nowrap;

增加 display: -webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;。

webkit是CSS的扩展属性，该方法适用于WebKit浏览器及移动端；

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

---

还有一种方法，并不是真正的截取，只是用css技巧添加…符号和渐变隐藏多余内容，适用性比较广，看下代码

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}    
p::after{content: "..."; position: absolute; bottombottom: 0; rightright: 0; padding-left: 40px;    
background: -webkit-linear-gradient(left, transparent, #fff 55%);    
background: -o-linear-gradient(rightright, transparent, #fff 55%);    
background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
background: linear-gradient(to rightright, transparent, #fff 55%);    
}

给p的高度height设置成line-height的整数倍，overflow设置hidden，防止多余部分显示出来。

用：after伪类添加…符号，再用背景渐变柔和过渡效果。这个方法值得借鉴，缺点是不管文字有没有超过都会显示…号。