css 只显示2行

问题背景

在编写网页时，有时我们希望只显示一部分文本内容，并且限制显示的行数。本文将介绍如何使用 CSS 来实现只显示两行的效果。

解决方案

要实现只显示两行的效果，我们可以使用 CSS 的 `-webkit-line-clamp` 属性。该属性只在 WebKit 浏览器中有效，因此需要有对应的浏览器兼容性考虑。

首先，我们需要给要显示的文本容器添加一个样式类，例如 `.text-container`。在该样式类中，我们可以设置以下属性：

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

在上述代码中，`display: -webkit-box;` 属性将文本容器的显示方式设置为一个弹性框。`-webkit-line-clamp: 2;` 属性用于限制显示的行数为 2 行。`-webkit-box-orient: vertical;` 属性则决定文本的排列方向为垂直方向。最后，`overflow: hidden;` 属性用于剪裁超出行数的文本。

代码解释

上述代码中的 CSS 属性通过使用 WebKit 浏览器私有的前缀 `-webkit-` 来添加对应的样式，以确保在兼容性方面得到正确的展示。

总结

通过使用 `-webkit-line-clamp` 属性，我们可以轻松地实现只显示两行文本的效果。这样可以在网页设计中提供更好的局部内容展示和信息控制。