CSS实现内容超过长度后以省略号显示

封面图 • 2026-01-12 • Html/Css

在 CSS 中，要实现**内容超过一定长度后以省略号（...）显示**，可以使用 `text-overflow` 属性。不过需要注意的是，这种方法仅适用于**单行文本**。

---

### ✅ 一、单行文本超出显示省略号

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

**HTML 示例：**

```html
<div class="text-ellipsis">这是一段很长的文本，超出部分会显示省略号...</div>
```

---

### ⚠️ 注意事项：

- `white-space: nowrap;` 是关键，它防止文本换行。
- `text-overflow: ellipsis;` 只能在 `overflow: hidden;` 或 `overflow: scroll;` 的容器中生效。
- 该方法不适用于多行文本（如两行或更多行）。

---

### ✅ 二、多行文本超出显示省略号（兼容性方案）

对于多行文本的省略号，CSS 原生支持有限，但可以通过以下方式实现：

#### 方法一：使用 `-webkit-line-clamp`（现代浏览器支持）

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

**说明：**
- `-webkit-line-clamp` 控制显示的行数。
- 该属性是 WebKit 浏览器（如 Chrome、Safari）的私有属性，但在现代浏览器中广泛支持。

---

#### 方法二：使用 JavaScript（兼容性更强）

如果需要更广泛的兼容性，可以使用 JavaScript 来截断文本并添加省略号。

```javascript
function truncateText(element, maxLength) {
  if (element.textContent.length > maxLength) {
    element.textContent = element.textContent.substring(0, maxLength) + '...';
  }
}

// 使用示例：
const el = document.querySelector('.multi-line');
truncateText(el, 30);
```

---

### ✅ 总结

| 场景 | 实现方式 | 说明 |
|------|----------|------|
| 单行文本 | `text-overflow: ellipsis;` | 简单有效，兼容性好 |
| 多行文本 | `-webkit-line-clamp` | 现代浏览器支持良好 |
| 兼容性要求高 | JavaScript 截断 | 最灵活，但需要 JS 支持 |

---

如果你有具体的 HTML 结构或样式需求，我可以帮你进一步优化代码。