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。漏掉任意一个，浏览器就当它不存在。
常见翻车点：
-
默认是 inline 元素，width和overflow对它无效——得加display: inline-block或display: block - Flex 子项默认
min-width: auto，会撑开容器绕过截断——必须显式写min-width: 0 - 表格单元格（
）要生效，父 得设
table-layout: fixed，否则宽度声明不生效- 用
flex: 1时，width不会被自动推导——得额外补width: 0或max-width: 100%单行省略怎么兼容 Firefox 和旧版 Safari？
text-overflow: ellipsis在所有现代浏览器中都支持单行省略，包括 Firefox —— 只要你把那四条规则配齐。真正不兼容的是多行方案-webkit-line-clamp，但单行不需要它。关键不是“加个前缀”，而是确保：
-
white-space: nowrap真正作用在文本容器上（别被父级white-space: normal覆盖） -
overflow: hidden没被祖先元素的overflow: visible或overflow: auto干扰 - 宽度值是明确的：比如
width: 200px、max-width: 80%、width: 30ch（ch单位对中英文混排更稳定） - 如果用在
或上，注意它们默认有内边距和字体继承，可能影响视觉宽度判断
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。表格里
单行省略总失败？ 因为
是 display: table-cell，它的宽度计算逻辑和普通块级元素不同。直接写四件套大概率失效。必须分两步走：
- 给
加
table-layout: fixed，让列宽由表头或 CSS 宽度决定，而不是内容撑开- 在
内部嵌一层 ，把四件套全写在div上，而不是直接写在td上示例：
超长路径 /api/v1/users/1234567890.td-truncate { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }别指望靠
word-break: break-all替代——它会劈开单词，破坏可读性，且和ellipsis冲突。 - 在
- 用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
