# 内容省略

URL: https://caijiao.org/css/11-advanced/05-ellipsis
Source: docs/css/11-advanced/05-ellipsis.md
Description: 内容省略是 CSS 中常见的文本处理技巧，用于隐藏溢出文本并显示省略号，提升布局整洁度。

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

---

## 1. 单行文本省略

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

### 示例：

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

---

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

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

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

### 示例：

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

## 内容省略示例

[在线代码演示](/css/demos/35.html)