css 多行溢出显示省略号

CSS中提供了过多文本显示省略号的实现方法，常用的有单行省略号和多行省略号两种，下面将重点讲解多行省略号。

在HTML中，我们可以使用

标签来定义一个段落，在该标签上加上样式，然后就可以设置多行文本的省略号显示。

    /* 设置段落样式 */    p {
            display: -webkit-box;
            -webkit-line-clamp: 3;
     /* 行数 */        -webkit-box-orient: vertical;
     /* 必须配合 display: -webkit-box;
     属性 */        overflow: hidden;
            text-overflow: ellipsis;
    }
    

在上述代码中，我们使用了 CSS 的属性 -webkit-box 和 -webkit-line-clamp 来实现多行文本的显示。其中 -webkit-box 属性用来将元素转化为弹性盒子，-webkit-line-clamp 属性用来规定在块元素中显示的文本行数。这里我设置了 3 行文本。

同时，我们也使用了 overflow 属性来控制超出文本的隐藏，并设置 text-overflow 属性来添加省略号。这样就大功告成了。如果想要设置更多行文字，只需要更改 -webkit-line-clamp 属性的值即可。

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