zoukankan      html  css  js  c++  java
  • 文本超过指定行数换行-css

    <article id="lineWord">Chrome--测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号测试文字超出行后省略号

    #lineWord{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    fireFox下好像并不管用!!!但可以简单实现效果/******************FireFox***************************/

    <article class="lineWord Firefox-box">
      <div class="for-fireFox-hidden">
        Firefox--火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式火狐浏览器下定义样式
      </div>
    </article>

    .lineWord{
       80%;
      border: 1px solid #eee;
      padding: 10px;
      border-radius: 10px;
      margin:30px auto;
    }

    .Firefox-box{
      position: relative;
    }
    .for-fireFox-hidden{
      height: 3em;
      font-size: 15px;
      overflow: hidden;
    }
    .for-fireFox-hidden:after{
      content: '...';
      position: absolute;
      bottom: 10px;
      right: 10px;
      background: #fff;
      padding: 0 0em;
       1.3em;
      text-align: center;
    }

    效果如下:

  • 相关阅读:
    Linux之硬件资源管理
    Linux之vi 文本编辑命令
    [2]窗口程序的创建
    [1]cs辅助项目分解
    1.3 Windows操作系统
    (PYG)学习去除软件自效验
    CSUST 4006-你真的会树套树套树吗?(贪心|dp)
    CSUST 4003-你真的会泡面吗?(优先队列模拟)
    2020牛客暑期多校第八场I-Interesting Computer Game(离散化+并查集)
    2020牛客暑期多校K-Kabaleo Lite(贪心)
  • 原文地址:https://www.cnblogs.com/adolfvicto/p/8418395.html
Copyright © 2011-2022 走看看