单行文本省略需white-space:nowrap、overflow:hidden、text-overflow:ellipsis及固定宽度；多行则用display:-webkit-box、-webkit-line-clamp和-webkit-box-orient:vertical。
当文本内容过长，超出容器宽度时，我们通常希望用省略号（...）来优雅地截断文本，而不是让文字溢出或换行。CSS 提供了 text-overflow 属性来实现这一效果，但要正确使用它，还需要配合其他几个关键属性。
1. 单行文本省略号：text-overflow: ellipsis
最常见的是单行文本溢出显示省略号。仅设置 text-overflow: ellipsis 是不够的，必须同时满足以下条件：
- white-space: nowrap：禁止文本换行
- overflow: hidden：隐藏溢出内容
- 容器有固定或最大宽度（如 width、max-width）
示例代码：
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
这样，当文本超过 200px 时，末尾会自动显示“...”。
立即学习“前端免费学习笔记（深入）”；
2. 多行文本省略号：WebKit 私有属性
CSS 原生不支持多行省略号，但现代浏览器普遍支持 WebKit 的私有属性 -webkit-line-clamp，可以实现多行截断。
关键点：
- 将容器设为 display: -webkit-box
- -webkit-box-orient: vertical 启用垂直盒模型
- 使用 -webkit-line-clamp 指定行数
- 同样需要 overflow: hidden
示例：限制两行文本并显示省略号
.text-ellipsis-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-width: 200px;
}
这段代码会让文本最多显示两行，超出部分被截断并加上省略号。
3. 实际应用中的注意事项
在真实项目中，有几个细节容易被忽略：
- 确保父容器有明确宽度：百分比、flex 或固定值均可，但不能是“自动”无限宽
- 避免内联元素直接使用：span 等内联元素建议转为 inline-block 或 block
- 兼容性考虑：-webkit-line-clamp 在 IE 中不支持，需降级处理或用 JS 方案替代
- 中英文混合场景：ellipsis 表现一致，无需特殊处理
4. 替代方案：纯 CSS 跨浏览器兼容技巧
如果需要支持老版本浏览器，可使用“伪元素 + 渐变遮罩”模拟省略号效果：
.fallback-ellipsis {
position: relative;
padding-right: 1em;
}
.fallback-ellipsis::after {
content: "...";
position: absolute;
right: 0;
background: white; /* 与背景色一致 */
}
这种方式不够精确，但在无法使用标准方案时可用。
基本上就这些。掌握 text-overflow 与相关属性的组合，再了解 -webkit-line-clamp 的用法，就能应对大多数文本截断需求。实际开发中建议优先使用标准方案，并根据项目兼容性要求选择是否降级。
