CSS 限制文字只显示两行

在本文中，我们将介绍如何使用CSS将文本内容限制为只显示两行，并提供一些示例说明。

阅读更多：CSS 教程

使用CSS截取文字

要限制文本内容只显示两行，我们可以使用CSS中的all属性。该属性用于定义如何处理对象的内容溢出。

首先，我们需要创建一个包含文本内容的HTML元素，例如一个<div>元素。然后，我们可以使用以下CSS代码来限制文本只显示两行：

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

在上面的CSS代码中，-webkit-box属性将元素的显示值设置为-webkit-box，即使用弹性盒子布局。-webkit-box-orient属性定义了元素的方向为垂直方向。-webkit-line-clamp属性指定了元素的行数限制为2行。overflow属性设置为hidden，用于隐藏溢出的文本内容。

示例

让我们通过一个示例来演示如何使用CSS限制文本内容只显示两行。假设我们有一个包含长文本的<div>元素，如下所示：

<div class="text-content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et rhoncus nisi.
</div>

通过添加上述的CSS代码，我们可以将文本内容限制为只显示两行。例如：

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

上述示例中的文本内容将被截断，只显示前两行。任何超过两行的内容将被隐藏起来，以便适应元素的高度。

支持的浏览器

需要注意的是，上述使用-webkit-box属性的CSS代码只适用于使用Webkit引擎的浏览器，如Safari和Chrome。对于其他浏览器，我们可以使用display: -webkit-inline-box;来实现相同的效果。

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

对于不支持Webkit引擎的浏览器，我们可以使用JavaScript来实现类似的效果。

总结

通过使用CSS的-webkit-box属性，我们可以轻松地将文本内容限制为只显示两行。这对于需要在有限的空间内显示大段文字的设计非常有用。请记住，在使用这种技术时要考虑到跨浏览器的兼容性，并在需要时使用JavaScript作为替代方案。