截断文本 CSS

在 Web 开发中，我们经常需要将文本内容截断，以适应页面布局和设计。这篇文章将介绍如何使用 CSS 来截断文本。

1. text-overflow 属性

text-overflow 属性可以控制当容器中的文本溢出时如何显示。它有以下几个可选值：

• clip：简单地裁剪溢出文本，不显示省略号。
• ellipsis：裁剪溢出文本，并在结尾处显示省略号。
• string：裁剪溢出文本，并在结尾处显示一个自定义字符串。

下面是一个例子：

.overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在这个例子中，我们给容器设置了一些样式：

• white-space: nowrap;：防止文本换行。
• overflow: hidden;：隐藏溢出部分的文本。
• text-overflow: ellipsis;：在结尾处显示省略号。

2. 多行文本截断

如果要对多行文本进行截断，CSS 本身并没有提供一个明确的方法。但是，我们可以使用一些技巧来实现它。以下是两种实现多行文本截断的方法。

2.1. 使用伪元素

这种方法需要使用 display: -webkit-box; 和 -webkit-line-clamp 属性来实现。

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

这个例子中，我们在容器上使用了一些新的属性：

• display: -webkit-box;：将容器设为 -webkit-box。
• -webkit-line-clamp: 3;：限制文本为 3 行。
• -webkit-box-orient: vertical;：使文本在垂直方向上显示。

然后，我们使用 overflow: hidden; 来处理多余的文本，保持样式的一致性。

现在，我们的文本会被截断，并且在结尾处显示省略号（它并不是我们自己添加的，而是浏览器自动生成的）。

2.2. 使用线性渐变

这种方法需要使用一个 linear-gradient() 函数来创建一个渐变，然后用它来截断文本。

.multiline-gradient {
  display: inline-block;
  width: 200px;
  height: 3.6em;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent, transparent 1.1em, #fff 1.1em);
}

在这个例子中，我们创建了一个线性渐变背景，它从透明到白色，以便截断文本。我们使用 transparent 来创建一个透明的区域，然后使用 em 单位来找到文本的具体高度。

现在，我们的文本会被截断，并在结尾处显示一个干净的截断点，而不是省略号。

总结

在这篇文章中，我们介绍了如何使用 CSS 来截断文本。我们讨论了 text-overflow 属性，以及两种用于多行文本截断的技巧。我希望这个教程对你有帮助，如果有任何问题或建议，请随时与我联系。