text-overflow: ellipsis生效必须同时满足三个条件：white-space: nowrap强制单行、overflow: hidden创建裁剪边界、明确宽度约束（如width或max-width），缺一则省略号不显示；flex/grid中还需加min-width: 0。
必须同时设置 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis，缺一不可。
为什么三个属性一个都不能少
单独写 text-overflow: ellipsis 是无效的——它只定义“溢出时怎么显示”，但不控制“是否算溢出”或“溢出后要不要裁掉”。white-space: nowrap 确保文本不换行，形成单行挤压；overflow: hidden 才真正创建裁剪边界；三者合起来，浏览器才明白：“这是单行、超了要藏、藏的地方打点”。
-
white-space: nowrap：若换成normal或没设，文本自动折行，根本不会触发溢出逻辑 -
overflow: hidden：若设成visible或scroll，内容会露出来或出现滚动条，省略号不会出现 -
text-overflow: ellipsis：若用clip，则直接硬切，无省略号；Firefox 支持string值（如text-overflow: "…"），但其他浏览器不认
容器宽度必须明确指定
没有宽度，就没有“溢出”的参照系。即使父容器是 100%，子元素也得继承到具体数值，否则效果消失。
- 可用
width（如width: 200px）、max-width（更适配响应式）、或flex-basis（在 Flex 布局中） - 在表格中，
td默认不响应width，需配合table-layout: fixed才生效 - 内联元素（如
span）默认不接受width，得先加display: inline-block或block
常见失效场景和修复方式
不是代码写错，而是上下文破坏了前提条件。最常踩的坑都跟布局模型有关。
- Flex 容器里的子项没截断：默认
min-width: auto会撑开，加min-width: 0解锁收缩能力 - Grid 项文字不省略：同理，加
min-width: 0，再确认该格子有明确inline-size（即宽度）约束 - 移动端 Safari 偶尔不显示：旧版可能需要
-webkit-text-overflow: ellipsis（iOS 12 及更早） - IE 兼容：IE8+ 支持标准写法，但 IE7 需要
zoom: 1触发 hasLayout
真正难的不是写这三行 CSS，而是确保它们运行在正确的盒模型里——宽度、display 类型、父级布局约束，任何一个环节松动，省略号就悄无声息地消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
