文字显示两行，多余的省略号（兼容搜狐）

    我平时调试代码用的谷歌，之前也没有注意到这个问题，但是最近老板用搜狐看我写的网站，发现了在搜狐上文字超过两行显示省略号这个样式不起作用，于是找到了这个解决方案。

　　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));
　　}