网上很多的解决方法是针对一行超出部分，隐藏并显示省略号的，代码如下：

overflow:hidden;white-space:norwrap;text-overflow:hidden;

针对webkit浏览器，多行显示时可以通过以下css代码实现，但对于非webkit浏览器，这种写法没有效了。

display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;

有没有一种通用的方法来实现，当然有，通过伪类:after来实现

span{margin:0 19px 4px 17px;width:112px;height:57px;position: relative; line-height: 20px;overflow: hidden;display:block;}span:after{content: "..."; position: absolute;bottom: 0; right: 0; padding:0 17px 1px 0px;width:27px;height:20px;color:#fff;background-color:#333;}

但这种写法有点问题，就是只能针对三行的情况，如果内容少于三行时，省略号仍然在第三行，还是有点问题，现进行如下修改：

将span的height去掉，添加max-height:57px;就可以实现多行超出部分隐藏显示省略号的问题

span{margin:0 19px 4px 17px;width:112px;max-height:57px;position: relative; line-height: 20px;overflow: hidden;display:block;}span:after{content: "..."; position: absolute;bottom: 0; right: 0; padding:0 17px 1px 0px;width:27px;height:20px;color:#fff;background-color:#333;}　　

还有一种写法，跟第一种类似，只是加了兼容的写法

max-height: 44px;  word-wrap:break-word;  text-overflow: -o-ellipsis-lastline;  overflow : hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;

　　

 

记录下码代码时的问题。