[分享]css3文字超出2行省略号

CSS3提供了非常多的文本样式属性，让我们可以轻松地实现各种各样的文字效果，其中包括了文字超出2行时用省略号表示的效果。下面我们就来看一下如何使用CSS3实现这个效果。显示全部文字： .text{ o...

CSS3提供了非常多的文本样式属性，让我们可以轻松地实现各种各样的文字效果，其中包括了文字超出2行时用省略号表示的效果。下面我们就来看一下如何使用CSS3实现这个效果。

显示全部文字：
    .text{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space:nowrap;
    }

仅显示2行文字：
    .text{
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    } 

上述代码中，我们先使用overflow属性将多余的文字隐藏，然后通过text-overflow: ellipsis属性添加省略号表示未显示的内容。这段代码中，我们还通过white-space:nowrap属性来防止被截断的文字换行。

如果你想要仅显示2行文字，并用省略号代表未显示的内容，那么我们可以使用 display: -webkit-box 属性，这是浏览器私有属性。-webkit-line-clamp: 2 属性来规定最多显示2行，同时通过 -webkit-box-orient: vertical;将文字方向垂直。

以上就是CSS3文字超出2行省略号的实现方法，希望可以对你的前端开发工作有所帮助。