[分享]css做多显示两行

CSS做多行显示两行是一个常见的需求，比如产品列表、博客文章摘要等都需要显示一定长度的内容。下面我们就来介绍如何使用CSS实现多行显示两行。.text { display: webkitbox; we...

CSS做多行显示两行是一个常见的需求，比如产品列表、博客文章摘要等都需要显示一定长度的内容。下面我们就来介绍如何使用CSS实现多行显示两行。

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

我们使用了一个CSS属性webkit-box，同时使用了两个相关的属性webkit-box-orient和webkit-line-clamp。

-webkit-box是一个CSS弹性盒子布局属性，用于在容器中创建一个或多个弹性盒子。我们把要多行显示的文本放在一个div容器中，并使用display: -webkit-box;将其变成一个弹性盒子。

-webkit-box-orient: vertical;用于指定弹性盒子中的子元素（文本）应该如何排列。在这里，我们将其设置为垂直排列。

-webkit-line-clamp: 2;用于指定在弹性盒子中应该显示的行数。我们将其设置为2行，超过两行的文本被隐藏。

最后，我们加上overflow: hidden;属性，以便超出两行的文本被隐藏。

这就是使用CSS实现多行显示两行的方法。希望对你有所帮助。