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