CSS 使用 overflow: hidden 时的文本裁剪

在本文中，我们将介绍当使用 CSS 的 overflow: hidden 属性时，如何实现文本裁剪的效果。overflow: hidden 是一个常用的 CSS 属性，用于隐藏超出容器范围的内容。当应用于文本时，它可以实现文本的裁剪效果，使得超出容器宽度的文本隐藏起来。

阅读更多：CSS 教程

基本用法

要实现文本裁剪效果，我们首先需要创建一个容器，并给它设置一个固定的宽度。然后，将文本放入容器中，并使用 overflow: hidden 进行样式设置。

<div class="container">
  <p class="text">这是一段超长文本，超出容器宽度的部分将会被隐藏。</p>
</div>

.container {
  width: 200px;
  overflow: hidden;
}

.text {
  white-space: nowrap;
}

在上面的示例中，我们创建了一个宽度为 200px 的容器，并设置 overflow: hidden。文本被放置在一个 <p> 元素中，并给它添加了一个类名为 .text 的样式。通过设置 .text 的 white-space 为 nowrap，我们可以防止文本换行。

通过上述样式设置，超出容器宽度的部分文本将会被隐藏，只显示容器宽度内的文本内容。

多行文本裁剪

上述示例中的文本裁剪是针对单行文本的情况。如果要处理多行文本的裁剪，我们可以借助 CSS 的 text-overflow 属性。

<div class="container">
  <p class="text">这是一段超长文本，超出容器宽度的部分将会被隐藏。这是第二行文本，同样也会被裁剪。</p>
</div>

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

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

在上面的示例中，我们通过将容器的 display 设置为 -webkit-box，并使用 -webkit-line-clamp 属性限制显示的行数为 2，实现了多行文本的裁剪效果。同时，设置 text-overflow 为 ellipsis，当文本被裁剪时，添加省略号来指示裁剪部分的隐藏内容。

边框裁剪

以上示例中的文本裁剪只是在宽度方向上进行的，如果我们还想在高度方向上进行裁剪，可以使用另一个常用的 CSS 属性 -webkit-line-clamp。该属性可以限制文本显示的最大行数，并自动裁剪超出的部分。

<div class="container">
  <p class="text">这是一段超长文本，超出容器高度的部分将会被隐藏。这是第二段文本，同样也会被裁剪。</p>
</div>

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

.text {
  width: 200px;
  height: 60px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

在上面的示例中，我们通过设置容器的 height 为 60px，限制显示的最大高度，并将超出的部分隐藏起来。同时，设置 -webkit-line-clamp 为 2，限制最大行数为 2，实现了在高度方向上的文本裁剪效果。

总结

通过使用 CSS 的 overflow: hidden 属性，我们可以很方便地实现文本裁剪的效果。对于单行文本的裁剪，我们只需要设置容器的宽度，并把超出容器宽度的部分隐藏起来。对于多行文本的裁剪，我们可以借助 text-overflow 和 -webkit-line-clamp 属性来实现。当然，我们还可以将两种裁剪方式结合使用，实现更加灵活的效果。希望本文对你理解和使用 CSS 的文本裁剪有所帮助！