css 多行显示省略号兼容

在CSS中，我们经常需要控制文本显示的样式。有时候，我们希望文本在一定宽度下自动换行，但是又不想让它占据太多的空间，这时候就需要用到多行显示省略号。

CSS中的text-overflow属性可以实现多行显示省略号，但是这个属性只对单行文本有效。如果要让多行文本显示省略号，我们需要结合其他属性来实现。

以下是一个同时适用于单行和多行文本的多行省略号样式：

.ellipsis {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
 /* 最多显示两行 */}
.ellipsis::after {
      content: '...';
 /* 省略号 */}

该样式使用了三个属性：

• overflow: hidden，表示超出文本框的部分将被隐藏。
• display: -webkit-box，使用Flexbox布局。
• -webkit-line-clamp：2，用于控制最多显示的行数。

在这个样式中，如果文本超过两行，就会被隐藏并显示省略号。要注意的是，这个样式只对webkit内核的浏览器有效，需要在其他浏览器中使用类似的兼容写法。

.ellipsis {
      overflow: hidden;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-line-clamp: 2;
}
.ellipsis::after {
      content: '...';
      position: absolute;
      right: 0;
      bottom: 0;
}
    

这个兼容写法使用了多个display属性，来适配不同的浏览器内核。

此外，为了让省略号更好看，在样式中添加了一个绝对定位的伪元素。

总结来说，CSS多行显示省略号的实现方式较为复杂，需要结合多个属性和兼容写法。但是，这个样式在页面排版和美观中起到了重要的作用，我们需要在实际的开发中谨慎使用。

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