省略号生效需同时满足三个条件：overflow为hidden/scroll/auto、white-space为nowrap、内容实际宽度超过容器可用宽度；最常见失效原因是漏写white-space: nowrap或容器宽度未真正约束。

不依赖。省略号只是溢出后的一种视觉提示方式，不是溢出行为本身的前提；真正起作用的是 overflow: hidden 和容器尺寸约束，text-overflow: ellipsis 只是“锦上添花”——没它，文字照样被裁掉；有它，才显示 …。

为什么写了 overflow: hidden 还不生效？

因为浏览器根本没判定出“溢出”。默认文本会自动换行，内容始终在容器内，overflow 压根没机会触发。

• white-space: nowrap 是强制触发溢出的开关——它让文本拒绝换行，逼着内容横向伸展
• 容器必须有明确宽度约束：width、max-width 或 flex 下的 min-width: 0（尤其在 display: flex 容器中，子项默认不收缩）
• overflow: hidden 才能真正截断超出部分，否则即使不换行，内容也会撑开父容器

text-overflow: ellipsis 为什么有时不显示省略号？

它是个“条件型装饰”，三个条件缺一不可：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 父容器 overflow 值必须是 hidden、scroll 或 auto（visible 不行）
• white-space 必须是 nowrap（多行用 -webkit-line-clamp，但 ellipsis 在多行下仅靠 CSS 不可靠）
• 内容实际宽度 > 容器可用宽度（比如父容器 width: 200px，但子元素内联盒宽度超了）

常见漏写：white-space: nowrap —— 这是最常被跳过的一步，也是最隐蔽的失效原因。

表格单元格（<td>）里加省略号为啥特别容易失败？ <p>表格布局有自己的规则，<code><td> 默认是 <code>display: table-cell，它会优先适应内容，无视 overflow，除非你主动干预：

• 给 <table> 加 <code>table-layout: fixed，让列宽由 col 或 th/td 的 width 决定，而不是内容
• <td> 上必须同时写：<code>white-space: nowrap + overflow: hidden + text-overflow: ellipsis + max-width: 150px（不能只靠 width，因表格渲染机制特殊）
• 如果还要支持悬停看全文，顺手加上 title 属性：<td title="完整文本">截断文本</td>

最容易被忽略的点：省略号不是“功能开关”，而是“渲染结果”；所有失效，几乎都卡在 white-space: nowrap 没写，或容器宽度没真正约束住——别猜，用开发者工具检查 computed 样式里的 white-space 和 width 是否如你所设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！