CSS line-clamp

CSS line-clamp属性可以帮助我们控制文本在容器中的行数，并在超出限制行数时添加省略号。这个属性可以用来优化网站的用户界面，让多余的文本隐藏起来，不影响页面的可读性。

在大多数浏览器上，这个属性需要结合-webkit-line-clamp属性使用。

语法

/* Required */
display: -webkit-box;
-webkit-box-orient: vertical;
/* Optional */
-webkit-line-clamp: <number>;
overflow: hidden;
text-overflow: ellipsis;

属性说明

• display: -webkit-box; 可以强制容器元素为一个块容器。这样可以保证-webkit-line-clamp正常工作。

• -webkit-box-orient: vertical; 定义了将子项如何排成一个框，可以让文本元素垂直排列。

• -webkit-line-clamp: <number>; 定义了要显示的文本行数，必须与-webkit-box-orient属性一起使用。支持的值为正整数。超过指定行数的文本将被隐藏，并自动添加省略号。

• overflow: hidden; 可以隐藏超出容器边界的内容。配合-webkit-line-clamp可以保证文字在超出指定行数时自动显示省略号，并且不会显示完整的内容。

• text-overflow: ellipsis; 可以将文本末尾超出容器边界的内容用省略号隐藏。与overflow属性一起使用，可以固定省略号的位置。

示例

HTML:

<div class="container">
  <p class="text">这是一段超长的文本，我们可以用line-clamp属性来控制它的显示</p>
</div>

CSS:

.container {
  width: 200px;
  height: 80px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.text {
  font-size: 18px;
  line-height: 1.5;
  text-align: justify;
  margin: 0;
  padding: 0;
  text-overflow: ellipsis;
}

效果：

参考文献

• https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
• https://css-tricks.com/almanac/properties/l/line-clamp/