CSS3 文本样式 - text-overflow 属性

核心知识点

text-overflow 属性的概念

text-overflow 属性用于控制文本溢出其容器时的显示方式，通常与 white-space: nowrap 和 overflow: hidden 一起使用，以实现单行文本溢出时的省略号效果。

text-overflow 属性的值

注意事项

• text-overflow 属性仅在以下条件下生效：
  1. 元素必须设置 width 或 max-width（或其他限制宽度的属性）
  2. 元素必须设置 overflow 属性为 hidden、scroll、auto 或 clip
  3. 元素必须设置 white-space: nowrap（对于单行文本）或限制文本行数（对于多行文本）

学习目标

1. 理解 text-overflow 属性的作用和不同值的效果
2. 掌握如何使用 text-overflow 属性实现单行文本溢出时的省略号效果
3. 了解如何实现多行文本溢出时的省略号效果
4. 能够在不同场景中正确使用 text-overflow 属性

代码示例

基本用法示例

/* 示例 1: clip 值 */
.clip {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border: 1px solid #ccc;
}

/* 示例 2: ellipsis 值 */
.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #ccc;
}

/* 示例 3: 使用自定义字符串（仅部分浏览器支持） */
.custom-string {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " [更多]";
  border: 1px solid #ccc;
}

HTML 结构

<div class="clip">
  这是一段很长的文本，当它溢出容器时，会被直接裁剪，不显示省略号。
</div>

<div class="ellipsis">
  这是一段很长的文本，当它溢出容器时，会显示省略号，表示文本被截断。
</div>

<div class="custom-string">
  这是一段很长的文本，当它溢出容器时，会显示自定义的字符串。
</div>

多行文本溢出省略

虽然 text-overflow 属性本身只支持单行文本溢出，但我们可以使用其他 CSS 技术实现多行文本溢出省略：

/* 示例 4: 两行文本溢出省略 */
.multiline-2 {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* 示例 5: 三行文本溢出省略 */
.multiline-3 {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border: 1px solid #ccc;
}

HTML 结构（多行文本）

<div class="multiline-2">
  这是一段很长的文本，当它溢出容器时，会在第二行末尾显示省略号，表示文本被截断。这种方法使用了 WebKit 的私有属性，在大多数现代浏览器中都能正常工作。
</div>

<div class="multiline-3">
  这是一段很长的文本，当它溢出容器时，会在第三行末尾显示省略号，表示文本被截断。这种方法使用了 WebKit 的私有属性，在大多数现代浏览器中都能正常工作。
</div>

实用案例分析

案例 1: 导航菜单

在导航菜单中，菜单项文本长度可能不同，使用 text-overflow 可以确保菜单项保持一致的宽度：

.nav-item {
  display: inline-block;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 10px;
}

案例 2: 卡片标题

在卡片式布局中，标题可能需要限制显示行数：

.card-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

案例 3: 表格单元格

在表格中，单元格内容可能过长，需要截断显示：

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

ASCII 示意图

text-overflow 不同值的效果对比

+-------------+------------------------+------------------------+
| 值          | 效果                   | 适用场景               |
+-------------+------------------------+------------------------+
| clip        | 直接裁剪溢出文本       | 不需要省略号的场景     |
| ellipsis    | 显示省略号             | 需要提示用户有更多内容 |
| "string"    | 显示自定义字符串       | 特殊需求场景           |
+-------------+------------------------+------------------------+

单行 vs 多行文本溢出

单行文本溢出:
+------------------------+
| 这是一段很长的文本...  |
+------------------------+

多行文本溢出 (2行):
+------------------------+
| 这是一段很长的文本，当  |
| 它溢出容器时...         |
+------------------------+

实践练习

练习 1: 实现导航菜单的文本溢出处理

创建一个导航菜单，包含多个菜单项，使用 text-overflow 属性确保菜单项文本溢出时显示省略号，且菜单项宽度一致。

练习 2: 实现卡片式布局的标题溢出处理

创建一个卡片式布局，包含标题、描述和图片，使用 text-overflow 相关技术确保标题在两行内显示，超出部分显示省略号。

练习 3: 实现表格单元格的文本溢出处理

创建一个表格，包含多列数据，使用 text-overflow 属性确保单元格内容溢出时显示省略号，且表格宽度适应容器。

总结

text-overflow 属性是 CSS3 中控制文本溢出显示方式的重要属性，通过与其他属性的配合使用，可以实现各种文本溢出处理效果：

• 单行文本溢出：使用 text-overflow: ellipsis 配合 white-space: nowrap 和 overflow: hidden
• 多行文本溢出：使用 WebKit 的 -webkit-line-clamp 属性（非标准但广泛支持）

合理使用 text-overflow 属性，可以使布局更加整洁美观，同时向用户提示有更多内容，提升用户体验。需要注意的是，在使用 text-overflow 时，必须确保满足其生效的条件，否则可能不会达到预期效果。