text-overflow: ellipsis生效必须同时满足三个条件：width或max-width明确设值、white-space: nowrap、overflow: hidden；缺一不可，且仅支持单行省略。
要让 text-overflow: ellipsis 正常工作，不能只写这一条——它本身不触发截断，只是“告诉浏览器：截断时请显示省略号”。真正起作用的是三个属性的配合，缺一不可。
单行省略必须满足的三个条件
以下 CSS 规则需同时设置在**块级容器**上（如 div、p）：
-
width 或 max-width 明确指定：比如
width: 200px或max-width: 100%。没有宽度限制，浏览器无法判断“哪里算溢出”。 - white-space: nowrap：强制文本不换行，把所有内容压成一行，为溢出创造前提。
-
overflow: hidden：裁剪掉超出容器边界的内容。这是
text-overflow生效的基础——没隐藏，就无所谓“溢出后怎么显示”。
只有这三项齐备，text-overflow: ellipsis 才会生效，末尾出现标准省略号（U+2026，不是三个英文点）。
常见失效原因和修复方式
实际开发中，省略号不显示，往往因为漏了其中一项：
- 写了
text-overflow: ellipsis却没加white-space: nowrap→ 文字在空格处自动换行，根本不会溢出到单行末尾。 - 容器是 Flex 或 Grid 子项，且未设
min-width: 0→ 浏览器默认不允许内容收缩，导致宽度计算异常，overflow: hidden失效。 - 用在
span等内联元素上 → 必须先设display: block或inline-block，否则width和overflow不起作用。
多行省略不能靠 text-overflow: ellipsis
text-overflow: ellipsis 原生只支持单行。实现多行（比如最多显示 2 行或 3 行）需用 WebKit 私有方案：
display: -webkit-box-
-webkit-line-clamp: 2（数字即最大行数） -webkit-box-orient: vertical-
overflow: hidden（仍需保留）
注意：该方案目前仅被 Chrome、Safari、Edge 等主流 Blink/WebKit 内核浏览器支持，Firefox 尚未原生支持，需用 JavaScript 回退方案。
兼容性小提示
IE10+ 支持 text-overflow: ellipsis，但需加前缀：-ms-text-overflow: ellipsis。现代项目中可不加，但若需兼容旧系统，建议保留。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
