css 多行超出显示省略号代替

CSS中的多行超出显示省略号代替是一种常见的美化网页排版的方法。它使得网页显示更为简洁，并且避免了文本内容过多导致的页面空间浪费。本文将介绍实现多行超出显示省略号代替的方法。

首先，我们可以使用CSS 3中的text-overflow属性实现单行文字超出显示省略号代替的效果，例如：

p {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
}

该代码中，我们定义了p标签的overflow属性为hidden，使得内容溢出隐藏，white-space属性为nowrap，使得p标签中的文本不换行。最后，我们使用text-overflow属性来定义超出部分显示省略号代替。

然而，以上代码只能实现单行文字的省略。如果我们要实现多行文字的省略，我们需要借助Webkit内核的CSS属性-webkit-line-clamp。示例代码如下：

p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
      /* 显示省略号之前的行数 */    -webkit-box-orient: vertical;
        overflow: hidden;
}
    

在以上代码中，我们定义了p标签的display属性为-webkit-box，-webkit-line-clamp属性为3，表示只显示3行文本，而超出部分会用省略号代替。最后，我们还定义了webkit-box-orient属性为vertical，使得多行文本显示方向为垂直方向。

综上所述，我们可以通过text-overflow和-webkit-line-clamp属性来实现多行超出显示省略号代替的效果，从而美化网页排版，提高网页的可读性和美观度。

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