单行省略必须同时满足white-space: nowrap、overflow: hidden、width或max-width，缺一不可；text-overflow: ellipsis仅定义截断时的显示方式，不触发截断逻辑。
单行省略必须配齐 white-space: nowrap、overflow: hidden、width 或 max-width，缺一不可；多行省略依赖 -webkit-line-clamp，但 Firefox 不支持，不能当作通用方案。
单行省略为什么加了 text-overflow: ellipsis 还不生效
因为 text-overflow: ellipsis 本身不触发截断，只定义“被截断时怎么显示”。真正决定是否截断的是另外两个条件：
-
overflow必须是hidden、scroll或auto（visible是默认值，完全不截断） -
white-space必须是nowrap（normal会自动换行，没机会溢出） - 容器必须有明确的块级宽度约束：
width、max-width，或父级用了table-layout: fixed；width: auto或未设宽的 flex item 会撑开，省略号静默失效
常见错误写法：.title { overflow: hidden; text-overflow: ellipsis; } —— 漏掉 white-space: nowrap 和宽度，浏览器压根不进入“单行溢出”判断流程。
-webkit-line-clamp 多行省略的硬性依赖和兼容性红线
这个方案不是“加个属性就行”，而是三件套绑定生效：
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N（N 为整数） -
text-overflow: ellipsis在这里只是辅助渲染，真正控制截断逻辑的是-webkit-line-clamp - Firefox 直到 v125 仍需手动开启实验性开关
layout.css.line-clamp.enabled，生产环境不可依赖 - 若容器内含
<img>、inline-block元素，可能破坏-webkit-box的行高对齐，导致最后一行被切掉半截字
高度不能靠 height 硬设，否则易错位；推荐用 line-height × 行数 计算并留 0.2em 余量。
表格单元格（<td>）里省略号总失效的原因
表格默认行为会优先适应内容宽度，导致 overflow: hidden 形同虚设。必须双保险：
- 给
<table>加table-layout: fixed，让列宽由<th>/<td>的width或max-width决定 - 给
<td>加white-space: nowrap、overflow: hidden、text-overflow: ellipsis、max-width: 150px（用max-width比width更适配响应式）
漏掉 table-layout: fixed 是表格中省略号失效的头号原因——哪怕其他条件全对，列宽仍会被长文本撑开。
中文和英文混排时的截断差异
中英文在 white-space: nowrap 下表现不同：
- 中文按字断行，更容易在固定宽度下触发省略
- 英文单词默认不断行，一个长单词（如 URL）会顶满整行，哪怕中间有空格
- 想让英文也按词断行？加
word-break: break-word或overflow-wrap: break-word，但这会破坏white-space: nowrap，导致text-overflow: ellipsis失效 - 统一控制建议：用
ch或em单位设宽，比像素更稳定；等宽字体下截断位置更可预测
字体差异会影响实际截断位置：同一字符串在 Chrome 和 Safari 里可能差 1–2 个字符，这是渲染引擎和字体度量差异导致的，无法完全消除。
