css 多行超出省略号兼容

CSS中的省略号属性可以很好地处理单行文本溢出的情况，但是当文本一行超过一定长度后，如果要实现多行省略号，就会变得比较困难。需要通过一些技巧实现兼容性。

/* 定义多行省略号样式 */.ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
}
/* 兼容性写法 */.ellipsis {
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      overflow: hidden;
      text-overflow: ellipsis;
}
.ellipsis::after {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #fff;
      padding-left: 3px;
}
    

下面是实现多行省略号的步骤：

1. 使用flex或者box布局，设置纵向排列
2. 使用overflow:hidden属性隐藏超出部分
3. 使用text-overflow:ellipsis属性显示省略号
4. 通过伪元素添加省略号

这样就可以实现多行省略号啦！

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