兼容IE文本控制两行，多余省略，亲测有效

Posted 2020-10-26 大云

　　正常情况下，都会使用 -webkit-line-clamp:2; 

 

　　word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/

    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/

    -webkit-line-clamp: 2; /** 显示的行数 **/

　　overflow: hidden; 

 

　　 但是不兼容IE浏览器，所以我们可以这样做：

 

　　width: 225px;   

    height:50px;  

    overflow: hidden; /*设置一个高度，溢出隐藏*/ 

 

　　接着添加一个伪类元素：

　　

　　.fh5co-copy>p:after {

    　　content:"...";

    　　position:absolute;

    　　bottom:45px;

    　　right:34px;

    　　background:#FFF;

    　　padding-left:0.2em;

　　}

 

　　大功告成