zoukankan      html  css  js  c++  java
  • 兼容IE文本控制两行,多余省略,亲测有效

      正常情况下,都会使用 -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;

      }

     

      大功告成

     

      

  • 相关阅读:
    bzoj 3924
    bzoj 1095
    luogu 4886
    bzoj 2152
    CF960G
    bzoj 3561
    bzoj 4176
    bzoj 4407
    bzoj 3309
    luogu 4608
  • 原文地址:https://www.cnblogs.com/DY9412/p/8527683.html
Copyright © 2011-2022 走看看