CSS技巧：如何限制内容只显示三行

在网页设计中，我们经常需要限制内容的显示行数，以便在有限的空间内展示更多的信息，在CSS中，我们可以使用以下几种方法来实现这个功能。

我们来看一下可能遇到的，最常见的问题是，当我们使用height、line-height或者max-height属性来限制内容高度时，如果内容的高度超过了这些属性的值，那么内容可能会溢出容器，这是因为这些属性只能限制内容的最大高度，而不能保证内容的高度不会超过这个值。

接下来，我们来看看如何解决这个问题，一种常见的方法是使用伪元素和overflow属性，我们可以创建一个隐藏的容器，然后在这个容器中使用伪元素来显示内容的一部分，我们可以设置overflow属性为hidden，这样当内容的高度超过容器的高度时，多余的内容就会被隐藏起来。

以下是一段常用的代码：

.container {
  position: relative;
}
.content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  background: black;
  visibility: hidden;
  overflow: hidden;
}

这段代码会创建一个宽度和高度都为1px的黑色矩形，然后将这个矩形覆盖在内容的每一行上，当内容的高度超过容器的高度时，这个矩形就会自动扩展，从而将多余的内容隐藏起来。

这种方法也有一些缺点，它会添加额外的DOM元素和计算量，这可能会影响页面的性能，它只能处理文本内容，对于图片和其他非文本元素可能无法正常工作。

为了解决这些问题，我们可以使用CSS3的新特性——column-count和column-gap属性，这两个属性可以让我们更灵活地控制元素的布局，而无需使用额外的DOM元素或复杂的计算。

以下是一段优化后的代码：

.container {
  column-count: 3;
  column-gap: 20px; /* 这个值可以根据需要调整 */
}

这段代码会将容器分割成三列，并且每两列之间有20px的间隙，这样，无论内容的长度如何，都可以保持每行的内容数量不变，这种方法既简单又高效，而且可以处理各种类型的元素。