text-overflow: ellipsis生效必须同时满足四个条件：width（或max-width）、overflow: hidden、white-space: nowrap、text-overflow: ellipsis；缺一不可，且flex容器中子元素需加min-width: 0。
单行文本溢出必须配齐这四个 CSS 属性
只写 text-overflow: ellipsis 是没用的，它不会生效。真正起作用的是四者缺一不可的组合：width（或 max-width）、overflow: hidden、white-space: nowrap、text-overflow: ellipsis。
常见错误现象包括：文字直接换行、省略号不出现、整段被截断但无省略号。根本原因是漏了其中某一项，尤其是 width —— 没宽度，浏览器就不知道“哪里算溢出”。
-
width必须是具体值（如200px或100%），百分比在 flex 容器中可能失效，建议优先用固定值或max-width -
white-space: nowrap不可替换成pre或pre-wrap，否则换行逻辑错乱 - 若父容器用了
display: flex，子元素需加min-width: 0防止 flex 基线拉伸导致宽度计算异常
多行省略用 -webkit-line-clamp 时的兼容性陷阱
这个方案在 Chrome、Safari、Edge（新版）和绝大多数安卓/iOS WebView 中可用，但在 Firefox 和旧版 IE 中完全无效。它不是标准属性，W3C 未收录，所以不能指望“未来自动支持”。
要让它稳定工作，必须同时声明三个配套属性：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N。漏掉任意一个，text-overflow: ellipsis 在多行下也不会触发。
-
-webkit-line-clamp的值必须是整数，不能是calc()或变量（CSS 自定义属性也不行） - 高度不能靠
height硬设，否则可能切掉半行字；推荐用line-height × 行数计算并留一点余量 - 若内容含
inline-block元素或图标，可能破坏-webkit-box的布局流，导致截断错位
需要全浏览器兼容？用伪元素方案代替 -webkit-line-clamp
当项目必须支持 Firefox 或老版本桌面浏览器时，-webkit-line-clamp 就得放弃。可行替代是定位 + ::after 渐变遮罩，原理是“视觉上盖住末尾”，不依赖截断逻辑。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键点在于：height 要精确匹配显示行高 × 行数，::after 的 background 渐变起点必须对齐文字右边缘，且 content 设为 "\2026"（Unicode 省略号）才能保证符号渲染一致。
- 必须设置
position: relative在容器上，否则::after无法精确定位 -
line-height建议用无单位数值（如1.4），避免与px/em混用引发计算偏差 - 该方案无法响应字体缩放或动态字号变化，若页面支持「放大文字」辅助功能，需额外监听
font-size变更并重算height
表格单元格里文字省略要额外加 table-layout: fixed
普通 td 默认按内容自适应宽度，text-overflow 在里面基本无效。想让省略号起作用，必须先锁定表格列宽。
最稳妥的做法是给 table 加 table-layout: fixed，再给 td 设置 width 或 max-width，最后才套单行省略那套四件套。
-
table-layout: fixed后，所有列宽由第一行th或td的width决定，后续行不再影响布局 - 避免用
word-break: break-all强制断英文/数字，它会把 “URL” 或 “ID-12345” 切成无意义碎片，改用overflow-wrap: break-word更合理 - 如果表格有
colspan，需确保跨列单元格的width总和与对应列宽一致，否则省略位置会偏移
真正难的不是写对这几行 CSS，而是判断「这里到底该用哪一套」—— 单行？多行？是否要保 Firefox？有没有表格嵌套？这些决策点一旦错，调试成本远高于重写样式。别迷信“一套通吃”，先看目标环境再选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
