单行文本省略号必须同时设置white-space: nowrap、overflow: hidden和text-overflow: ellipsis，且容器需有明确宽度或块级显示；缺一不可，否则文字换行或撑开容器导致失效。
必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可。只写 text-overflow: ellipsis 是无效的。
单行省略号为什么总不生效？
常见现象是文字照常换行或直接撑开容器，根本不出省略号。核心原因在于“三件套”没凑齐，或容器宽度未锁定。
-
white-space: nowrap缺失 → 文本自动折行，没有“水平溢出”，text-overflow失去触发条件 -
overflow: hidden缺失或为visible（默认值）→ 内容直接溢出显示，裁剪区域不存在 - 容器没设
width、max-width或flex-basis→ 浏览器无法判断“哪里算溢出”，尤其在 Flex/Grid 中，子项默认min-width: auto会阻止收缩 - 对
<span></span>等内联元素直接加样式 → 必须先设display: inline-block或block，否则width和overflow不生效
多行省略号能纯CSS实现吗？
可以，但仅限 WebKit/Blink 内核（Chrome、Safari、新版 Edge），Firefox 目前仍不支持标准方案。
- 必须用
display: -webkit-box，不能用flex或grid -
-webkit-line-clamp: 3中的数字是硬编码行数，无法响应式缩放 -
-webkit-box-orient: vertical必须显式声明，漏掉会导致整块内容塌陷或不截断 - 容器需有明确高度约束或
max-height，否则-webkit-line-clamp可能失效 - 不要和
text-overflow: ellipsis混用——多行场景下它不起作用，纯属冗余
Flex/Grid 布局中省略号突然失效？
这是最隐蔽也最高频的问题：Flex 项目默认 min-width: auto，会阻止内容被 overflow: hidden 裁剪。
- 在 flex 容器的子项上加
min-width: 0（或min-width: 0px），这是关键修复点 - 避免对 flex 项目设
width: 100%，优先用flex: 1+min-width: 0 - Grid 项同理，若列轨道用
fr单位，需确保该格子自身有min-width: 0 - 表格单元格要加
table-layout: fixed，否则td宽度由内容撑开，省略逻辑失效
真正难的不是写对那三行 CSS，而是理解浏览器如何根据盒模型计算“溢出边界”——white-space 控制内容流形态，overflow 定义裁剪上下文，text-overflow 只是最后的视觉修饰。任何一环脱离盒模型约束，就会掉链子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
