答案：通过text-overflow结合white-space和overflow可实现单行文本溢出省略，使用-webkit-box和-webkit-line-clamp可实现多行省略，需注意容器宽度限制及浏览器兼容性，并可通过title属性或JavaScript进行降级处理。
在CSS项目中，文字溢出处理是前端开发常见的布局需求。当文本内容超出容器宽度时，我们通常不希望它破坏页面结构或影响视觉效果。通过合理使用 text-overflow 属性，结合其他相关样式，可以优雅地控制文本的显示方式。
基础用法：单行文本溢出省略
最常见的情况是让单行文本在超出容器时显示省略号（...）。实现这一效果需要三个关键属性配合：
- white-space: nowrap：禁止文本换行
- overflow: hidden：隐藏溢出内容
- text-overflow: ellipsis：溢出部分显示省略号
示例代码：
.text-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意：容器必须有固定或最大宽度（如 width、max-width），否则无法触发溢出效果。
立即学习“前端免费学习笔记（深入）”；
多行文本溢出省略
CSS 原生的 text-overflow 只支持单行，但可以通过 WebKit 特性实现多行省略。适用于现代浏览器（尤其是移动端）：
- display: -webkit-box：将块元素设为弹性盒子
- -webkit-line-clamp：限制行数
- -webkit-box-orient: vertical：设置子元素垂直排列
- 依然需要 overflow: hidden
示例代码：
.text-multi-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
这种方式适合产品标题、新闻摘要等需要截断多行文本的场景。
兼容性与降级处理
text-overflow: ellipsis 在主流浏览器中支持良好，但多行省略的 -webkit- 前缀方案在非 WebKit 内核浏览器中可能失效。建议采取以下策略：
- 对重要文本添加 title 属性，鼠标悬停时显示完整内容
- 使用 JavaScript 检测是否溢出，并动态添加提示（如“查看更多”按钮）
- 在低版本IE中可考虑用省略符“…”手动截断，或限制字符数
进阶技巧：自定义溢出符号与方向
除了默认的省略号，text-overflow 还支持其他值：
- text-overflow: "..."：可自定义符号，比如用“→”或“[更多]”
- text-overflow: clip：直接裁剪不显示任何标记
- text-overflow: fade：渐隐效果（部分浏览器支持）
例如：
.text-fade {
text-overflow: fade;
}
.text-custom {
text-overflow: ' ▶';
}
基本上就这些。掌握 text-overflow 的使用，能有效提升界面整洁度和用户体验。关键是理解其依赖条件，并根据实际场景选择单行或多行方案。不复杂但容易忽略细节。
