文字显示两行,多余的省略号(兼容搜狐)

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

  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));
  }

猜你喜欢

转载自www.cnblogs.com/qiruoranbeginner/p/9935426.html
今日推荐