text-overflow: ellipsis生效需同时满足三个条件：overflow为hidden/scroll/auto、white-space为nowrap、容器有明确宽度约束（width/max-width或table-layout: fixed）；缺一不可。
单行省略号失效，八成是因为 white-space: nowrap 漏了，或者容器没设 width / max-width —— 这两个条件缺一不可，不是“影响大不大”的问题，是根本不会触发。
为什么 text-overflow: ellipsis 完全不显示
这个属性本身不主动“截断”，它只在满足三个硬性条件时才画省略号：
-
overflow必须是hidden、scroll或auto（不能是visible） -
white-space必须为nowrap（多行场景下-webkit-line-clamp才生效） - 容器必须有明确的块级宽度约束（
width、max-width，或父容器用table-layout: fixed等强制尺寸）
常见错误写法：div { overflow: hidden; text-overflow: ellipsis; } —— 没加 white-space: nowrap，浏览器压根不认为文本“溢出”，省略号永远不出现。
table 里 td 的省略号总撑开列宽
表格单元格默认是 display: table-cell，它会优先适应内容，导致 overflow: hidden 失效。必须加两道保险：
- 给
table加table-layout: fixed，让列宽由th/td的width或max-width决定 - 给
td加white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 推荐用
max-width而非width，避免小屏下文字被过度压缩
顺带一提：加 title 属性能解决悬停查看全量内容的需求，但别依赖它替代可访问性设计。
多行省略号为什么在 Firefox 里不显示
-webkit-line-clamp 是 WebKit/Blink 专属属性，Firefox 不支持。如果你只写这一种方案，Firefox 用户看到的就是整段文字直接被 overflow: hidden 剪掉，没有省略号。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
稳妥做法是双轨并行：
- 主方案用
-webkit-line-clamp（Chrome/Safari/Edge） - 降级方案用伪元素渐变遮罩（
::after+linear-gradient），兼容 Firefox 和旧版 IE - JavaScript 动态截断仅建议用于关键文案（如标题），避免滚动时重排重绘
注意：伪元素方案依赖固定行高和精确高度计算，line-height 必须是数值（如 1.5），不能是 normal 或百分比。
text-overflow 在 Flex/Grid 容器里失效怎么办
Flex 项或 Grid 项默认会拉伸以填充空间，即使你写了 white-space: nowrap，也可能因 flex: 1 或 grid-template-columns: 1fr 导致宽度不受控。
关键动作是「切断弹性扩张」：
- 给文本容器加
min-width: 0（Flex）或min-inline-size: 0（Grid），防止其成为无限宽的弹性基准 - 确保父容器有明确宽度，或用
max-width: 100%锁死上限 - 避免对文本元素本身设
flex-grow: 1，它会让文本容器抢走所有剩余空间
最易忽略的一点：Flex 容器的 align-items 或 Grid 的 align-content 若设为 stretch，可能间接干扰高度约束，进而影响多行省略逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
