css两行自动省略兼容ie

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

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浏览器中同样可以实现两行自动省略的效果,从而提升用户体验。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两行自动省略兼容ie

粉丝

0

关注

0

收藏

0

已有0次打赏