css 多行字体省略号

CSS中的text-overflow属性可以用来设置文本过长时的省略方式，其中包括单行和多行的省略方式。对于单行文本来说，text-overflow可以直接与overflow和white-space配合使用，但对于多行文本，在普通情况下是没有省略方式的，这时需要借助一些技巧才能实现多行省略。

.example {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
}

使用以上代码，可以实现多行文字溢出时显示省略号的效果。其中，display属性的-webkit-box值表示将元素转化为块级元素，-webkit-box-orient属性表示块级元素内的子元素排列方向，-webkit-line-clamp属性表示要显示文字的行数。需要注意的是，该方法只适用于Safari和Chrome浏览器。

而对于其他浏览器，可以利用伪元素：after实现多行省略，具体代码如下：

.example {
      overflow: hidden;
      position: relative;
      line-height: 1.2em;
      max-height: 3.6em;
      text-align: justify;
      margin-right: -1em;
      padding-right: 1em;
}
.example:after {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 2em;
      height: 1.2em;
      background-color: inherit;
}
.example:before {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      width: 1em;
      height: 100%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
    

这段代码中，我们利用:before伪元素生成一个渐变背景，让最后一行文字逐渐变为透明，从而实现省略号效果。而通过:after伪元素实现省略号的添加。这样就可以在多行文字中实现省略号的效果。

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