解决多行文本溢出在火狐的兼容性写法,且在谷歌也可实现正常效果

HTML:

< p class = “do_content” > 
    气动泵是一种新型输送机械,是目前国内最新颖的一种泵类。采用压缩空气为动力源,对各种腐蚀性液体,带颗粒的液体,高粘度,易挥发,易燃,剧毒的液体,均能予
</ p >

CSS:

.do_content{
    position: relative;
    margin: 1%;    /*决定省略号在文本尾部的位置*/
    line-height: 2em;
    height: 4em;       /*此处高度决定了显示几行*/
    overflow: hidden;
    text-overflow: ellipsis;
}

.do_content:after {
    bottom: 0;
    right: 0;
    content: "...";
    padding: 0 -40px 0 0;
    position: absolute;
}

X效果图:


猜你喜欢

转载自blog.csdn.net/k912120/article/details/80781597