文字显示两行，多余的省略号（兼容搜狐）
我平时调试代码用的谷歌，之前也没有注意到这个问题，但是最近老板用搜狐看我写的网站，发现了在搜狐上文字超过两行显示省略号这个样式不起作用，于是找到了这个解决方案。
1、不需要兼容
p{
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
或者
p{
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
这两种其实都一样
2、兼容搜狐（注意：一定要设置高度是行高的两倍）
p{
line-height: 21px;
height:42px;
position: relative;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
p::after{content: “…”; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, rgba(199, 198, 204, 0));
background: -o-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
background: -moz-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
background: linear-gradient(to right, transparent,rgba(199, 198, 204, 0));
}