text-overflow: ellipsis仅在文本被物理截断时触发，需同时满足width/max-width、white-space: nowrap、overflow: hidden及min-width: 0（flex子项），缺一即静默失效。
text-overflow: ellipsis 为什么“有时有效、有时没反应”
不是浏览器抽风，而是它只在**文本真被物理截断**的瞬间才触发。只要任一条件在渲染时未满足（哪怕只是临时计算失败），省略号就彻底静默——不报错、不警告、也不 fallback。
Flex 布局里 min-width: auto 是最大干扰源
Flex 子项默认 min-width: auto，它会强制撑开自身去容纳整段文字，导致 overflow: hidden 形同虚设。这个行为在嵌套 Flex 中会逐层继承，外层加了 min-width: 0 并不能穿透到内层文本元素。
-
min-width: 0必须显式写在**最终承载文本的元素上**，不能只加在父容器或中间 wrapper 上 - 如果该元素同时设了
flex-shrink: 0，min-width: 0会被忽略——删掉或改回flex-shrink: 1 - DevTools 的 Computed 面板里检查该元素的
min-width值，要是显示auto就说明还没生效
width/max-width 计算失败比你想象中更常见
所谓“有宽度”，是指浏览器能**在布局阶段确定一个可比较的像素值**。很多看似合理的写法其实无法满足：
-
width: 100%在 flex 容器中可能被解析为fit-content，尤其当父容器没设明确 width 时 -
max-width: 50vw在小屏下可能小于单个汉字宽度，导致截断逻辑跳过 -
width: fit-content、width: max-content或inline-size: auto全都不算“确定宽度” - 表格单元格里没配
table-layout: fixed，列宽靠内容撑开，width实际无效
white-space 和 overflow 的组合陷阱
text-overflow: ellipsis 对 white-space 和 overflow 的取值极其敏感，且不接受“差不多”：
-
white-space: normal、pre-wrap、break-spaces下，它完全不工作——必须是nowrap或pre -
overflow: auto在某些滚动容器中会因尺寸重排延迟，导致首次渲染时截断未触发 -
overflow: scroll虽然技术上满足“裁剪”条件，但会强制显示滚动条，视觉上掩盖了省略号 - 父元素设了
overflow: hidden，但文本在子span里——样式必须落在span自身，不能靠继承
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
