限制文本行数 - CSS

CSS中有很多属性可以控制文本的显示方式，其中有一个属性叫做line-clamp，可以用来限制文本的行数。

什么是line-clamp？

line-clamp是一个CSS属性，用于限制一个块级元素中文本的行数。使用该属性时，必须结合display属性和-webkit-line-clamp的属性配合使用。注意：-webkit-line-clamp是私有属性，只在Webkit和Blink引擎的浏览器中支持。

如何使用line-clamp？

下面是一个使用line-clamp属性的例子：

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

上面代码中，我们将.line-clamp元素的display属性设置为-webkit-box，可以将元素变成一个弹性盒子容器；将-webkit-line-clamp属性设置为2，表示只显示两行文本；将-webkit-box-orient属性设置为vertical，表示弹性盒子容器内的项目沿容器的垂直主轴排列；将overflow属性设置为hidden，表示超出的文本内容隐藏。

使用该属性时需要注意以下几点：

• line-clamp只能用于单行文本或多行文本在某行被截断的情况；
• line-clamp只有在一个块级元素内才能正常工作；
• line-clamp只有在WebKit和Blink引擎的浏览器（比如Safari和Chrome）中支持，因此如果在其他浏览器中使用该属性可能会引起兼容性问题。

练习

现在你已经了解了如何使用line-clamp属性来限制文本的显示行数，可以自己尝试在CSS中使用该属性来美化自己的网站。

参考文献

• CSS line-clamp Property
• 使用 line-clamp 限制文本行数