text-overflow需配合 white-space、overflow 和宽度属性实现文本截断。单行截断用 white-space:nowrap+overflow:hidden+text-overflow:ellipsis；多行推荐 -webkit-line-clamp；自定义符号支持有限，慎用；flex布局中需设 min-width:0 防止溢出失效。
文本溢出处理是 前端 开发中常见的布局需求，text-overflow 属性在控制超出容器的文本显示方式上非常关键。它不能单独起作用，需要配合其他 css 属性一起使用才能实现预期效果。以下是几种常用的技巧和场景应用。
单行文本溢出显示省略号（…）
这是最常见的文本截断方式，适用于标题、列表项等单行显示区域。
实现要点：
- 容器必须有固定或最大宽度（width 或 max-width）
- 禁止换行（white-space: nowrap）
- 溢出隐藏（overflow: hidden）
- 设置 text-overflow 为 ellipsis
.text-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本溢出显示省略号
标准的 text-overflow: ellipsis 只支持单行，多行需要借助 WebKit 特性或其它方法。
立即学习 “ 前端免费学习笔记（深入）”；
推荐使用 -webkit-line-clamp 实现跨 浏览器 兼容性较好的多行截断：
- 使用 display: -webkit-box
- 设置 -webkit-line-clamp 指定行数
- 设置 -webkit-box-orient: vertical
- 同样需要 overflow: hidden
.text-ellipsis-2lines {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
width: 200px;
}
注意：该方案在非 WebKit 浏览器 中可能不完全支持，生产环境建议加 fallback 或使用 javaScript 补充处理。
自定义溢出符号或保留空格
text-overflow 还支持其他值，比如：
- text-overflow: clip —— 直接裁剪，不显示任何符号
- text-overflow: “…” —— 自定义 字符串（实验性，支持有限）
- text-overflow: ellipsis —— 默认省略号
例如想用箭头代替省略号：
.custom-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ‘ →’;
}
⚠️ 注意：引号内必须是单个字符或简单字符串，且浏览器支持程度不一，慎用于正式项目。
结合 flex 布局的安全写法
在 Flex 容器中，子元素默认会收缩，但有时仍需手动限制最小尺寸以避免文本异常。
- 给 flex 项添加 min-width: 0 或 overflow: hidden
- 确保 text-overflow 生效的条件不被破坏
.flex-item {
flex: 1;
min-width: 0; /* 允许内容压缩 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
基本上就这些常用技巧。关键是理解 text-overflow 的依赖条件：只有当文本真正溢出且被隐藏时，它才会生效。合理组合 white-space、overflow 和 width 控制，就能应对大多数场景。
