css文字两行或者几行显示省略号

封面图 • 2025-09-23 • Html/Css

在 CSS 中，可以通过 `text-overflow` 属性结合 `white-space` 和 `overflow` 来实现多行文字超出时显示省略号的效果。以下是一个常见的解决方案：

### 示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文字省略号</title>
    <style>
        .multiline-ellipsis {
            display: -webkit-box; /* 使用WebKit的弹性盒子布局 */
            -webkit-box-orient: vertical; /* 设置盒子方向为垂直 */
            -webkit-line-clamp: 2; /* 设置最多显示2行 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: normal; /* 允许换行 */
        }
    </style>
</head>
<body>

<div class="multiline-ellipsis">
    这是一个示例文本，用于演示如何在CSS中实现多行文字超出时显示省略号的效果。你可以根据需要调整行数。
</div>

</body>
</html>
```

### 解释：
1. **`display: -webkit-box`**：使用 WebKit 的弹性盒子布局，支持多行文本的裁剪。
2. **`-webkit-box-orient: vertical`**：设置盒子的方向为垂直。
3. **`-webkit-line-clamp: 2`**：限制显示的行数为 2 行（可以根据需求修改）。
4. **`overflow: hidden`**：隐藏超出部分的内容。
5. **`text-overflow: ellipsis`**：在内容被裁剪时显示省略号。
6. **`white-space: normal`**：允许文本换行。

### 注意事项：
- `-webkit-line-clamp` 是一个非标准属性，仅支持 WebKit 内核的浏览器（如 Chrome、Safari）。如果需要兼容其他浏览器，可能需要通过 JavaScript 实现类似的多行省略效果。
- 如果需要更高的兼容性，可以考虑使用 JavaScript 库（如 [clamp.js](https://github.com/josephschmitt/clamp.js)）来实现多行省略号效果。

希望这个方法对你有帮助！