单行文本溢出需同时设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，多行则通过-webkit-line-clamp等私有属性实现，结合工具类可快速应用。
文本溢出处理是前端开发中常见的需求，尤其是在空间有限的容器内显示长文本时。使用CSS工具类结合 text-overflow: ellipsis 可以快速实现省略号效果。以下是实用技巧和实现方式。
基本条件：单行文本溢出加省略号
要让文本溢出显示省略号，必须同时满足三个CSS属性：
- white-space: nowrap —— 禁止换行
- overflow: hidden —— 超出部分隐藏
- text-overflow: ellipsis —— 显示省略号
示例工具类定义：
.text-ellipsis {white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
使用时只需给块级元素设置固定宽度或最大宽度：
立即学习“前端免费学习笔记（深入）”；
这是一段很长的文本内容，超出容器宽度将被截断并显示省略号
多行文本溢出加省略号
CSS原生不支持多行省略号，但可通过WebKit私有属性实现。适用于现代浏览器（Chrome、Safari等）。
关键属性：
- display: -webkit-box —— 启用弹性盒子模型
- -webkit-line-clamp —— 限制行数
- -webkit-box-orient: vertical —— 垂直排列子元素
- overflow: hidden —— 隐藏溢出内容
定义多行省略工具类：
.text-line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-line-clamp-3 {
-webkit-line-clamp: 3;
}
应用示例：
这是一段多行文本，超过两行的内容将被隐藏并显示省略号效果。
继续输入更多文字以测试溢出表现。
第三行应该看不到完整内容。
结合现代CSS框架使用工具类
在Tailwind CSS等实用优先的框架中，已内置相关工具类，可直接使用：
- truncate —— 单行省略
- line-clamp-N —— 多行省略（需启用插件或使用支持版本）
- overflow-hidden、whitespace-nowrap 等辅助类
Tailwind 示例：
长文本内容
多行文本内容
若框架未内置，可在自定义配置中添加对应工具类。
注意事项与兼容性
使用时注意以下几点：
- 容器必须有明确的宽度限制（width、max-width 或布局约束）
- 块级元素才能生效，内联元素需转为 block 或 inline-block
- 多行省略仅在WebKit浏览器稳定支持，Firefox需额外处理
- 避免在需要SEO或可访问性的场景中隐藏大量文本
基本上就这些。掌握这几个工具类组合，就能灵活应对大多数文本溢出场景。
