内容省略

在网页设计中，当文本长度超出容器时，常使用 CSS 实现“内容省略”，用 ... 表示未展示的部分，以防止布局错乱。

---

1. 单行文本省略

.ellipsis {
  white-space: nowrap;        /* 不换行 */
  overflow: hidden;           /* 隐藏超出内容 */
  text-overflow: ellipsis;    /* 显示省略号 */
}

示例：

<div class="ellipsis" style="width: 200px;">
  这是一段非常长非常长的文本，应该被截断并显示省略号。
</div>

---

2. 多行文本省略（仅部分浏览器支持）

使用 -webkit-line-clamp 和 display: -webkit-box：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* 限制显示2行 */
  overflow: hidden;
}

示例：

<div class="multiline-ellipsis" style="width: 300px;">
  多行文本省略是一种适用于长段内容的方式，当文本内容较多时，可以通过设置最大行数来控制显示。
</div>

内容省略示例

loading