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
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
多行文本溢出显示省略号
标准的 text-overflow: ellipsis 只支持单行，多行需要借助 WebKit 特性或其它方法。
立即学习“前端免费学习笔记（深入）”；
推荐使用 -webkit-line-clamp 实现跨浏览器兼容性较好的多行截断：
Delphi 7应用编程150例 CHM全书内容下载，全书主要通过150个实例，全面、深入地介绍了用Delphi 7开发应用程序的常用方法和技巧，主要讲解了用Delphi 7进行界面效果处理、图像处理、图形与多媒体开发、系统功能控制、文件处理、网络与数据库开发，以及组件应用等内容。这些实例简单实用、典型性强、功能突出，很多实例使用的技术稍加扩展可以解决同类问题。使用本书最好的方法是通过学习掌握实例中的技术或技巧，然后使用这些技术尝试实现更复杂的功能并应用到更多方面。本书主要针对具有一定Delphi基础知识
- 使用 display: -webkit-box
- 设置 -webkit-line-clamp 指定行数
- 设置 -webkit-box-orient: vertical
- 同样需要 overflow: hidden
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: 1;
min-width: 0; /* 允许内容压缩 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
基本上就这些常用技巧。关键是理解 text-overflow 的依赖条件：只有当文本真正溢出且被隐藏时，它才会生效。合理组合 white-space、overflow 和 width 控制，就能应对大多数场景。
