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;

      }

     

      大功告成

     

      

  • 相关阅读:
    hdu 1175
    hdu 2197
    STL的学习
    数据结构之线性结构栈
    Linux下Fork与Exec使用
    散列技术之哈希
    检索之二分检索
    检索之顺序检索
    程序员该怎样放松?8个好网站推荐
    外部碎片和内部碎片的区别
  • 原文地址:https://www.cnblogs.com/DY9412/p/8527683.html
Copyright © 2011-2022 走看看