单行文本省略需满足三个条件：设置固定宽度、white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis；多行省略可用 -webkit-line-clamp 配合 display: -webkit-box 实现，适用于现代浏览器，常用于标题、列表等空间受限场景。
在CSS初级项目中，当文本内容超出容器宽度时，我们常希望用省略号（...）来表示被截断的内容。这可以通过 text-overflow: ellipsis 实现，但需要配合其他几个关键样式才能生效。
1. 基本条件：单行文本溢出省略
要让文本溢出显示省略号，必须同时满足以下三个条件：
- white-space: nowrap —— 禁止文本换行
- overflow: hidden —— 隐藏溢出部分
- text-overflow: ellipsis —— 溢出时显示省略号
示例代码：
.text-ellipsis {
width: 200px; /* 固定宽度 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2. 多行文本省略（常用技巧）
CSS原生不支持多行省略，但可通过 -webkit-line-clamp 实现，适用于现代浏览器。
立即学习“前端免费学习笔记（深入）”；
关键点：使用 display: -webkit-box 和 -webkit-line-clamp 来限制行数。
示例：实现两行文本溢出省略
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 200px;
}
说明：-webkit-line-clamp 兼容性较好，但在极老浏览器中可能无效，适合大多数现代项目。3. 实际应用场景建议
在实际开发中，常见于标题、列表项、卡片描述等空间有限的区域。
- 确保父容器不自动撑宽，可设 max-width
- 避免在弹性布局中忽略 flex-shrink: 0 导致意外压缩
- 移动端适配时，用 rem 或 vw 设置宽度更灵活
小技巧：测试时可用长文本占位符（如 "Lorem ipsum..."）快速验证效果。
基本上就这些。掌握单行和多行省略的写法，就能覆盖大多数初级项目需求。
