[分享]css3指定行数

CSS3中可以通过line-clamp属性来指定文本所占据的行数。

/* 指定文本显示两行*/
.text{
    overflow : hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
} 

上述代码中，line-clamp被指定为2，表示文本最多显示两行，超过两行的内容会被隐藏。同时还有其他几个属性：

• overflow：hidden：超出容器的内容不显示。
• text-overflow：ellipsis：超出容器的内容以省略号（...）表示。
• -webkit-box-orient：vertical：将容器对象沿着垂直方向排布，和默认的水平排布反过来。
• display：-webkit-box：用来指定使用Flex布局时的一些属性。

需要注意的是，上述代码中使用了-webkit-前缀，这是因为line-clamp是一个非标准属性，在不同的浏览器中可能会有不同的表现。同时，该属性较为新颖，可能无法被一些旧版浏览器所支持。