text-overflow: ellipsis生效需同时满足三个条件：overflow: hidden、white-space: nowrap（单行）或配合-webkit-line-clamp（多行）、容器有确定宽度；缺一不可，且受字体字号影响需实测。
text-overflow: ellipsis 和文字溢出本身不冲突，而是专门用来处理溢出的——但必须满足三个硬性条件，缺一不可，否则省略号根本不会出现。
为什么加了 text-overflow: ellipsis 却没显示省略号
最常见原因是只写了这一条，其他两个关键样式缺失。浏览器会直接忽略 text-overflow，因为它不具备独立生效能力。
-
overflow: hidden必须显式设置，且不能是visible或auto（auto在某些滚动场景下也可能失效） -
white-space: nowrap必须存在，否则文本自动换行，没有“单行溢出”这个前提，ellipsis就无从触发 - 容器必须有**确定的宽度约束**：比如
width: 200px、max-width: 100%（父级有定宽）、或 flex/grid 下的尺寸收敛（如flex: 0 0 200px）；纯width: auto或未设宽的inline元素会撑开，不溢出
white-space 选 nowrap 还是 pre-wrap
取决于你要处理的是单行还是多行场景：
- 单行省略号：
white-space: nowrap是唯一可靠选择；pre、pre-line等会导致换行行为不可控，normal直接失效 - 多行省略号：
white-space: normal或pre-wrap可用，但必须配合display: -webkit-box+-webkit-line-clamp；注意-webkit-line-clamp是非标准属性，IE 完全不支持，Firefox 直到 2025 年底仍需前缀且行为不稳定 - 别误用
word-break: break-all来“辅助”省略——它会粗暴断词，和ellipsis逻辑无关，还可能让最后一行只剩半个字+省略号，视觉混乱
多行省略号在真实项目中怎么稳住
纯 CSS 多行省略号本质是“WebKit 特供”，跨浏览器落地必须做降级或兜底：
- 移动端或明确限定 WebKit 内核（如 iOS Safari、Android Chrome）：直接用
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical，简单高效 - 需要兼容 Firefox / Edge / 新版 Safari：检查
line-clamp是否已无前缀支持（2026 年多数已支持），但仍建议加回退：overflow: hidden+ 固定max-height+line-height计算截断（例如 2 行 × 1.5em = 3em），末尾靠 JS 补省略号更可控 - 绝对避免把
text-overflow: ellipsis直接套在多行块上——它只会作用于第一行末尾，其余行照常溢出，IE 尤其明显
真正容易被忽略的点：省略号是否生效，跟字体、字号、甚至 letter-spacing 都有关。同一段 CSS，在 14px 和 16px 下可能一个显示省略号、一个不显示，因为像素级宽度临界点变了。上线前务必在目标设备和字号下实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
