如何使用 CSS 截断多行文本

在网页设计和开发中，处理多行文本是非常常见的一个问题。有时候，由于布局的限制，我们需要将文本截断到指定的长度，以便它能够适应页面的宽度。这篇文章将介绍如何使用 CSS 来截断多行文本。

使用文本溢出（text-overflow）属性

在 CSS 中，有一个叫做文本溢出（text-overflow）的属性。这个属性可以让我们控制当一段文本超出容器大小时，如何显示这个超出的部分。默认情况下，文本超出容器大小时会被隐藏，但使用 text-overflow 属性可以显示省略号或自定义的内容。

以下是 text-overflow 属性的语法：

/* 该元素必须设置 overflow:hidden 或 overflow:scroll 属性 */
text-overflow: clip|ellipsis|string;

• 如果使用 clip 值，则超出容器的部分将被裁剪，并且不显示省略号。
• 如果使用 ellipsis 值，则超出容器的部分将被省略（缩略），并且显示省略号。
• 如果使用 string 值，则超出容器的部分将被改写成自定义的字符串，并且显示该字符串。

其中，clip 和 ellipsis 值都可以使用如下两个属性来控制：

• white-space 属性用于设置是否允许换行。
• overflow 属性用于设置当容器的内容超出容器大小时，如何处理溢出的内容。

以下是一个简单的例子，使用 ellipsis 和 white-space 属性截断多行文本：

.container {
  width: 300px;
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 使用省略号..显示溢出的部分 */
}

当容器中的文本超出 300px 时，它将被缩略，并且显示省略号。

可以将 string 值与伪元素（pseudo-elements）结合使用，来自定义截断的内容。下面是一个例子，使用 string 值自定义截断的内容：

.container::after { /* 使用伪元素:before或:after来添加额外的内容 */
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 5px;
  background-color: white;
}
.container {
  width: 300px;
  height: 3em; /* 设置容器高度 */
  position: relative; /* 设置定位，使伪元素可以与容器的底部对齐 */
  overflow: hidden;
  text-overflow: string; /* 使用自定义的字符串显示溢出的部分 */
  white-space: normal; /* 允许换行 */
}

该例子中，当容器中的文本超出 300px 时，它将被裁剪，并且使用自定义的字符串（“...”）代替。

总结

这篇文章介绍了如何使用 CSS 来截断多行文本。通过文本溢出（text-overflow）属性，我们可以控制当一段文本超出容器大小时，如何显示这个超出的部分。在使用 text-overflow 属性时，还可以结合 white-space 和 overflow 属性来控制是否允许换行以及如何处理溢出的内容。