css3限制文字行数

CSS3中拥有许多有趣的属性，其中一个非常有用的属性就是可以限制文字行数的text-overflow属性。

下面我们将介绍如何使用text-overflow属性来限制文字的行数：

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-Box; 
    -webkit-Box-orient: vertical;
    -webkit-line-clamp: 2;
}

首先，我们需要将容器的overflow属性设置为hidden，这样可以将超出容器范围的内容隐藏起来。

接下来，我们使用text-overflow属性来打上省略号，以告知用户还有更多内容未显示出来。

然后，我们需要将容器的显示方式设置为-webkit-Box，这样可以让容器内的文本按照垂直方向的布局方式进行排列。

在垂直布局方式下，我们还需要使用-webkit-line-clamp属性来限制文本显示的行数，此处我们将值设置为2，表示仅显示2行文字。

最后，我们要使用-webkit-Box-orient属性来指定文本的排列方向为垂直方向。

使用以上的CSS代码，我们就可以非常方便地实现限制文字行数的效果了，如果你有需要，不妨试试看吧！