zoukankan      html  css  js  c++  java
  • 文字显示两行,多余的省略号(兼容搜狐)

        我平时调试代码用的谷歌,之前也没有注意到这个问题,但是最近老板用搜狐看我写的网站,发现了在搜狐上文字超过两行显示省略号这个样式不起作用,于是找到了这个解决方案。

      1、不需要兼容

      p{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
      }

      或者

      p{

        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;

      }
    这两种其实都一样

      2、兼容搜狐(注意:一定要设置高度是行高的两倍)

      p{
        line-height: 21px;
        height:42px;
        position: relative;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
        -webkit-line-clamp: 2; /** 显示的行数 **/
        overflow: hidden; /** 隐藏超出的内容 **/
      }
      p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
        background: -webkit-linear-gradient(left, transparent, rgba(199, 198, 204, 0));
        background: -o-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
        background: -moz-linear-gradient(right, transparent,rgba(199, 198, 204, 0));
        background: linear-gradient(to right, transparent,rgba(199, 198, 204, 0));
      }

    
    
  • 相关阅读:
    在游戏中充分利用可编程的GPU
    坐标变换
    深入理解GPU Architecture(上)
    RV870和GT300的一些猜测
    深入理解Intel Core Microarchitecture
    CGDC见闻
    hdu 1517 K(2~9)倍博弈
    hdu 2177 威佐夫博弈+输出使你胜的你第1次取石子后剩下的两堆石子的数量
    坚持住
    真正体会到一个ac的快感
  • 原文地址:https://www.cnblogs.com/qiruoranbeginner/p/9935426.html
Copyright © 2011-2022 走看看