text-overflow: ellipsis失效主因是定位元素未触发BFC导致裁剪失效；修复需在position: relative父容器加overflow: hidden，或对flex子项设min-width: 0并配overflow: hidden。
定位导致text-overflow: ellipsis失效的典型现象
加了position: relative或position: absolute后，省略号突然不显示，或者只显示一半、被父层裁掉——这不是bug，而是定位改变了元素的堆叠上下文和溢出裁剪边界。浏览器在计算text-overflow时，会严格依赖当前元素的**内容框（content box）是否被其最近的定位祖先裁剪**。一旦父容器设置了position: relative但没配overflow: hidden，子元素即使自己写了overflow: hidden，也可能因父级未建立新的块格式化上下文而“漏出”。
为什么position会让overflow: hidden变弱
关键点在于：CSS规范规定，overflow属性仅对**建立了新块格式化上下文（BFC）或包含块（containing block）的定位元素**才可靠生效。而position: relative本身不创建BFC；只有加上overflow: hidden、display: flow-root或float等才会触发。所以常见失效链是：
- 父容器设了
position: relative→ 但没设overflow→ 不是BFC - 子元素设了
overflow: hidden+text-overflow: ellipsis→ 仍可能被父容器的“视觉溢出”覆盖 - 结果：省略号被父容器边缘硬切，或完全不可见
修复方案：三类定位场景对应处理
不用删position，只需补上对应约束：
-
父容器用
position: relative做布局锚点：必须加overflow: hidden（哪怕只是临时加overflow: hidden再用min-width: 0微调） -
子元素用
position: absolute做文字右对齐/图标覆盖：确保它不脱离文本流影响宽度计算 —— 把绝对定位元素设为pointer-events: none，并让承载文本的<span>用position: relative+z-index: 1盖住它 -
整个卡片用
position: relative+box-shadow等装饰：直接给卡片加overflow: hidden，且确认内部文本容器有min-width: 0（尤其在Flex中）
最容易被忽略的细节：定位 + Flex/Grid 的双重陷阱
当父容器既是position: relative又是display: flex时，子项默认min-width: auto会顶住width: 100%，导致text-overflow根本没机会触发。此时光加overflow: hidden不够，必须显式写：
立即学习“前端免费学习笔记（深入）”；
.text-container {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
真正卡住效果的，往往不是text-overflow本身，而是定位悄悄改写了谁在控制宽度、谁在裁剪内容——尤其是那个没写overflow的position: relative父层。
