text-overflow: ellipsis不生效的根本原因是未同时满足三条件：必须设置width或max-width、white-space: nowrap、overflow: hidden；且需作用于block/inline-block元素，Flex子项还需min-width: 0。
text-overflow: ellipsis 不生效？八成是漏了 white-space: nowrap 或没设 width/max-width。
单行文本截断必须配齐“三件套”
只写 text-overflow: ellipsis 没用，它依赖三个条件同时成立：
-
width或max-width—— 容器得有明确边界，否则浏览器不知道“溢出”从哪开始 -
white-space: nowrap—— 强制不换行，否则文本自动折行，ellipsis就没机会触发 -
overflow: hidden—— 隐藏超出部分，省略号才能被“挤”出来
常见错误：给 <span> 直接加这三条，但没改 display。默认 span 是内联元素，width 和 overflow 对它无效。得加 display: inline-block 或 display: block。
Flex 容器里子元素不收缩导致 overflow 失效
在 display: flex 的父容器中，子元素默认会尽可能撑开（flex-grow: 1），即使你写了 max-width: 200px，它也可能无视宽度把文字全显示出来。
立即学习“前端免费学习笔记（深入）”；
解决办法只有两个：
- 给子元素加
min-width: 0—— 这是 Flex 布局下让overflow生效的最轻量解法 - 或者直接加
overflow: hidden到子元素上（比只靠父级更可靠）
别指望靠 flex-basis 或 flex-shrink 精确控制——实测中，min-width: 0 才是那个“一加就灵”的开关。
-webkit-line-clamp 多行截断的兼容性陷阱
想截两行或三行？-webkit-line-clamp 是目前唯一能用的 CSS 方案，但它不是标准属性，Firefox 和旧版 Edge 完全不支持。
它真正起作用的前提比单行还苛刻：
- 必须配合
display: -webkit-box（不能用flex或grid） - 必须写
-webkit-box-orient: vertical（漏掉这句，line-clamp彻底失效） - 仍需
overflow: hidden，且父容器不能是inline元素
如果项目必须兼容 Firefox，别赌 CSS——要么服务端预截断，要么用 JS 测 scrollHeight 与 clientHeight 差值来动态加省略。
中英文混排时 overflow 被撑破怎么办
一个长 URL 或技术词（比如 /api/v1/users/:id）会让 text-overflow: ellipsis 彻底失效——浏览器宁可撑破容器也不在单词中间断。
这时候 word-wrap: break-word（等价于 overflow-wrap: break-word）比 word-break: break-all 更合理：
-
break-word只在必要时才断词，优先保持单词完整 -
break-all会把useCallback劈成useC+allback，可读性差 - 如果真要优雅断连字符，可试
hyphens: auto+lang="en"，但 Safari 和 Firefox 支持不稳定
最稳的底线：对代码类文本，用 font-family: monospace + overflow-x: auto 滚动查看，别硬截。
多行截断的“省略号”本质是视觉欺骗——CSS 不生成新字符，只是裁掉末尾并画点。一旦父容器高度算错、行高浮动、或字体加载延迟，省略号就可能错位甚至消失。上线前务必在真实设备上用不同字体、字号、缩放比例验证。
