css 多行省略多种实现

CSS的多行省略，是指当文本内容过长，不能完全显示的时候，通过缩短内容使用省略号来表示。针对不同的场景，有多种方式来实现多行省略。

/*方式一：使用-webkit-line-clamp*/.text{
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
}
/*方式二：使用text-overflow和box-sizing*/.text{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      box-sizing: border-box;
      height: 3.6em;
      line-height: 1.2em;
}
/*方式三：使用before伪元素*/.text{
      position: relative;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
}
.text:before{
      content: "...";
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      padding-left: 40px;
      background: linear-gradient(90deg, transparent, #fff 55%);
}
    /*方式四：使用-JS*/var str = document.getElementsByClassName('text')[0].innerHTML;
    document.getElementsByClassName('text')[0].innerHTML = str.substring(0, 100) + '...';
    

以上四种方式各有特点，可以根据实际情况选择最适合自己的方式来实现多行省略。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！