text-overflow: ellipsis不显示省略号的根本原因是未满足四要素：必须同时设置white-space: nowrap、overflow: hidden、明确宽度（width/max-width）及min-width: 0（Flex子项），且全部作用于同一块级元素，缺一不可。
必须显式设置宽度并确保容器为块级行为，否则 text-overflow: ellipsis 会直接失效，不是样式没生效，而是浏览器根本没触发截断逻辑。
为什么加了 text-overflow: ellipsis 还是不显示省略号
它不是“加了就亮”的开关，而是依赖文本被真实物理截断。常见失效组合包括：
-
white-space: nowrap漏了——normal或pre-wrap下完全不工作 -
overflow不是hidden（比如设成auto或默认visible） - 容器没设
width或max-width，哪怕写了flex: 1或100%，在 flex 容器中也常算不出有效宽度 - 父元素是
display: flex，子项没加min-width: 0，导致 flex 默认的min-width: auto强行撑开宽度
table 中 td 的省略号总不生效？关键在 table-layout: fixed
表格单元格默认按内容撑列宽，overflow: hidden 在这种布局下形同虚设。必须：
- 给
<table>加table-layout: fixed，且<table>自身要有明确宽度（如width: 100%） -
<td>上设max-width（推荐）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 避免只靠
<td width="200">，优先用<col>或 CSS 控制列宽，更稳定
多行省略用 -webkit-line-clamp 时怎么不破坏语义和可访问性
这个方案本身不破坏语义，但容易误伤屏幕阅读器体验：
立即学习“前端免费学习笔记（深入）”；
- 必须保留原始完整文本在 DOM 中，不能用 JS 截断后重写 innerHTML
- 配合
aria-label或title提供全文，例如：<p aria-label="完整长文本">截断后文本…</p> -
display: -webkit-box会让元素脱离标准流，若内部有inline-block或图标，可能错位，需测试 - Firefox 不支持，生产环境不能只靠它；真要全兼容，得用伪元素渐变遮罩 + 精确
height计算，但无法响应动态字号变化
最易被忽略的是：所有方案都依赖「容器宽度可计算」，而现代布局（flex、grid、table）常让宽度隐式坍缩或撑开。与其反复调试，不如先确认 getComputedStyle(el).width 返回的是具体像素值——不是 auto，不是 fit-content，才是省略号能工作的起点。
