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;

      }

     

      大功告成

     

      

  • 相关阅读:
    测试
    unittest发送测试报告邮件
    unittest生成测试报告
    Navicat连接Oracle详细教程
    Windows 2012 安装 Oracle 11g 报错:[INS-13001]环境不满足最低要求。
    Windows server 2012安装oracle11g(32/64位)步骤
    ElasticSearch和solr的差别
    HashMap和Hashtable的区别
    final关键字所修饰的类有什么特点
    springboot测试的时候插入数据: error performing isolated work; SQL [n/a]; nested exception is org.hibernate...
  • 原文地址:https://www.cnblogs.com/DY9412/p/8527683.html
Copyright © 2011-2022 走看看