css3 超过3行省略号

CSS3是为网页设计师带来了很多新特性，其中之一就是省略号（ellipsis）。省略号可以用来缩略长文本，避免它们占据太多空间。

在CSS3中，使用text-overflow属性可以实现省略号。通过该属性，我们可以指定要省略的文本以及省略号的位置。

要实现省略号，需要设置一下样式：

text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    

text-overflow属性的值为ellipsis，表示要在文本末尾添加省略号。white-space属性的值为nowrap，表示文本不允许换行。overflow属性的值为hidden，表示文本超出容器范围时进行裁剪。

如果我们有一个段落需要省略号，可以这样设置：

p class="ellipsis">
    这是一段超过三行的长文本，我们需要使用省略号。/p>
.ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
     /* 显示行数 */-webkit-box-orient: vertical;
     /* 垂直方向 */overflow: hidden;
    text-overflow: ellipsis;
}
    

以上代码中，我们使用了-webkit-box，-webkit-line-clamp和-webkit-box-orientation属性来实现省略号。-webkit-box可以将元素自动转换为弹性盒子，-webkit-line-clamp可以指定要显示的行数，而-webkit-box-orientation可以指定垂直方向。

总的来说，省略号是CSS3中很有用的特性，可以帮助我们更好的展示页面内容。只需要简单的设置一下样式，就可以实现超过三行的省略号效果。

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