text-overflow: ellipsis 需同时满足四个条件才生效：有明确 width 或 max-width、white-space: nowrap、overflow: hidden、自身为块级或 inline-block 元素；常见失效原因包括 inline 元素未设 display、flex 项未设 min-width: 0、表格未用 table-layout: fixed 等。
text-overflow: ellipsis 为什么加了没反应？
它根本不是“一加就生效”的样式，而是依赖四个条件同时成立才能触发的截断机制：必须有 width 或 max-width（不能是 auto）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis。漏掉任意一个，浏览器就当它不存在。
常见翻车点：
-
<span></span>默认是 inline 元素，width和overflow对它无效——得加display: inline-block或display: block - Flex 子项默认
min-width: auto，会撑开容器绕过截断——必须显式写min-width: 0 - 表格单元格（
<td>）要生效，父 <code><table> 得设 <code>table-layout: fixed，否则宽度声明不生效 - 用
flex: 1时，width不会被自动推导——得额外补width: 0或max-width: 100% -
white-space: nowrap真正作用在文本容器上（别被父级white-space: normal覆盖） -
overflow: hidden没被祖先元素的overflow: visible或overflow: auto干扰 - 宽度值是明确的：比如
width: 200px、max-width: 80%、width: 30ch（ch单位对中英文混排更稳定） - 如果用在
<button></button>或<input>上，注意它们默认有内边距和字体继承，可能影响视觉宽度判断
单行省略怎么兼容 Firefox 和旧版 Safari？
text-overflow: ellipsis 在所有现代浏览器中都支持单行省略，包括 Firefox —— 只要你把那四条规则配齐。真正不兼容的是多行方案 -webkit-line-clamp，但单行不需要它。
关键不是“加个前缀”，而是确保：
立即学习“前端免费学习笔记（深入）”；
hover 显示全文要不要 JS？
完全不用。原生 title 属性就能实现，无障碍友好、无 JS 依赖、无额外 DOM 操作。
写法很简单：
<p class="truncate" title="这是完整的超长文本内容">这是完整的超长文本内容</p>
配合 CSS：
.truncate {
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
注意：title 的内容不会被截断，屏幕阅读器能读到完整文本；但移动端长按触发提示的行为不稳定，部分 iOS 版本需额外加 pointer-events: auto。
表格里 <td> 单行省略总失败？
<p>因为 <code><td> 是 <code>display: table-cell，它的宽度计算逻辑和普通块级元素不同。直接写四件套大概率失效。
必须分两步走：
- 给
<table> 加 <code>table-layout: fixed，让列宽由表头或 CSS 宽度决定，而不是内容撑开 - 在
<td> 内部嵌一层 <code><div>，把四件套全写在 <code>div上，而不是直接写在td上示例：
<table style="table-layout: fixed; width: 100%;"> <tr> <td><div class="td-truncate">超长路径 /api/v1/users/1234567890</div></td> </tr> </table>.td-truncate { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }别指望靠
word-break: break-all替代——它会劈开单词，破坏可读性，且和ellipsis冲突。
