text-overflow: ellipsis 仅在文本真被截断时生效，需同时满足：white-space: nowrap、overflow: hidden、明确宽度（如px/%）、flex子项加min-width: 0；多行省略依赖-webkit-line-clamp且非标准，hover提示推荐用title属性。

text-overflow: ellipsis 不是加了就起作用的“开关”，它只在文本**真被截断**时才亮。没满足前提，浏览器直接忽略这条声明。

为什么 text-overflow: ellipsis 完全没反应

最常见原因就三个：white-space: nowrap 漏了、overflow 不是 hidden、容器没设 width 或 max-width（哪怕写了 flex: 1 也不算）。浏览器遇到任一缺失，就当这条规则不存在。

• white-space: nowrap 是强制单行的关键；用 normal 或 pre-wrap，text-overflow 直接失效
• overflow 必须是 hidden；visible（默认）、auto、scroll 都不触发省略号
• 宽度必须是明确值：比如 200px、80%；width: auto 或没写宽度，等于没约束

Flex 容器里文字不省略，min-width: 0 是必加项

Flex 子项默认 min-width: auto，会撑开自身去容纳全部文字，导致 overflow: hidden 形同虚设。光写四条基础规则还不够。

• 必须给子元素加 min-width: 0，覆盖 flex 默认行为
• 配合 flex: 1 和 width: 0 更稳，避免某些浏览器计算偏差
• 如果父容器是 display: table-cell，还得额外加 table-layout: fixed 才能约束列宽

多行省略只能靠 -webkit-line-clamp，但 Firefox 不认

纯 CSS 多行省略目前只有 WebKit 内核支持，Firefox 和旧 IE 完全无效。它不是标准属性，W3C 未收录。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须同时写齐三句：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2
• -webkit-line-clamp 的值只能是整数，不能是 calc() 或 CSS 变量
• 高度不能硬设 height，否则可能切掉半行字；推荐用 line-height × 行数 + 少量余量
• 内容里有 inline-block 元素或图标，容易破坏 -webkit-box 布局流，导致截断错位

hover 显示全文，title 属性比 JS 更轻量

不需要 JS，原生 title 就能实现 hover 提示，还支持屏幕阅读器，语义正确。

立即学习“前端免费学习笔记（深入）”；

• HTML 中直接写：<p class="ellipsis" title="完整文本">截断文本</p>
• CSS 只需保证四条规则齐全，title 值必须和文本内容完全一致（含空格、编码）
• 别用 :hover 动态改 white-space 和 overflow，会破坏布局流，尤其在 Flex/Grid 中容易引发重排

真正卡住人的点，从来不是记不住那四条 CSS，而是每次都在「容器有没有真正被限制宽度」这个前提上栽跟头——尤其是 flex 场景下漏掉 min-width: 0，或者表格单元格没加 table-layout: fixed。