[分享]css两行自动省略兼容ie

CSS中可以使用textoverflow属性来控制文字的显示方式，而其中值为ellipsis可以实现两行自动省略，并且这个属性在大多数现代浏览器中都是支持的，但是在IE浏览器中却存在兼容性问题。 .e...

CSS中可以使用text-overflow属性来控制文字的显示方式，而其中值为ellipsis可以实现两行自动省略，并且这个属性在大多数现代浏览器中都是支持的，但是在IE浏览器中却存在兼容性问题。

.ellipsis {
    display: -webkit-box;  //兼容webkit内核浏览器
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2;  //指定行数为2
    overflow: hidden;  //超出部分隐藏
    text-overflow: ellipsis; //显示省略号
} 

为了解决IE浏览器中的兼容性问题，我们可以新增一个样式，单独对IE浏览器进行处理。

.ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    /*兼容IE浏览器*/
    display: -moz-box; 
    -moz-box-orient: vertical; 
    -moz-box-lines: 2;
} 

通过以上的处理，我们可以实现在IE浏览器中同样可以实现两行自动省略的效果，从而提升用户体验。