text-overflow: ellipsis生效必须同时满足四个条件：white-space: nowrap、overflow: hidden、明确宽度（width/max-width）、同一块级元素上设置；flex/grid中还需加min-width: 0。
必须同时满足四个条件，缺一不可，否则省略号不会出现。
text-overflow:ellipsis生效的硬性前提
很多人加了 text-overflow: ellipsis 却没效果，根本原因是只写了这一条。它本身不隐藏内容、也不阻止换行，只是“告诉浏览器溢出时怎么提示”。真正起作用的是三者协同：
-
white-space: nowrap：强制单行，这是前提。设成normal或pre-wrap会直接失效 -
overflow: hidden：必须是hidden、scroll或auto；visible（默认）绝对不行 -
width或max-width：值必须可计算。百分比、固定像素都行，但min-width、flex-basis: auto、无约束的 Grid track 不算 - 父容器不能是“尺寸不可控”的布局上下文——比如 Flex 子项未设
flex-shrink: 0，或未设width的 Grid item，浏览器可能优先压缩元素而非触发截断
Flex/Grid 布局中常见的失效场景
在现代布局里，text-overflow 失效最多发生在 Flex 容器内。典型表现是文本被横向挤压变形，但就是不出省略号。
- Flex 子项默认
flex-shrink: 1，空间不足时先缩小自身宽度，而不是让内容溢出 - 解决办法：给文本容器加
flex-shrink: 0+ 明确width或max-width - Grid 中同理，若列轨道用
auto或minmax(min-content, 1fr)，也可能导致宽度不可算 - 示例修复写法：
.item { flex: 0 0 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
兼容性与前缀要不要加
截至 2026 年，text-overflow: ellipsis 在 Chrome/Firefox/Safari/Edge 全系支持，包括 Firefox 125+。IE 已淘汰，-ms-text-overflow 可以彻底丢掉。
- 唯一需要留意的是旧版 Safari（≤14.1）对
white-space: nowrap在某些嵌套 inline 元素下的渲染异常，可加display: block强制块级化 - 不要给
text-overflow加-webkit-前缀，它从来就不是 WebKit 私有属性 - 如果你在调试时发现省略号只在部分浏览器出现，大概率是宽度计算逻辑在不同引擎中不一致，优先检查
width是否被继承或重置
为什么有时候省略号出现在中间而不是末尾
这不是 bug，而是字体度量和渲染精度问题。尤其在使用非等宽字体、小字号（如 12px）、或开启 subpixel rendering 的系统上，浏览器对“最后一字符是否能塞进剩余空间”的判断可能偏差 0.5px。
- 无法完全避免，但可缓解：确保容器宽度为整数像素（避免 % 计算后带小数），或改用
max-width配合box-sizing: border-box - 不要试图用伪元素覆盖重绘省略号——
text-overflow是渲染层行为，CSS 无法干预其位置 - 如果业务强依赖精确位置（如金融类表格），建议后端预截断 + 添加省略标识，比纯 CSS 更可控
最常被忽略的一点：text-overflow 不是“样式”，而是“渲染指令”。它依赖浏览器对盒模型尺寸、文本流、格式化上下文的实时计算。一旦其中任一环节不可预测（比如 width 来自 JS 动态设置但未触发重排），省略号就会消失——这种问题往往在 SSR 或 hydration 后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
