text-overflow: ellipsis 必须配合 width（或 max-width）、white-space: nowrap、overflow: hidden 三者同时使用才生效；缺一不可，且 Flex/Grid 中需额外设置 min-width: 0。
text-overflow: ellipsis 必须配合哪些CSS属性才能生效
单独写 text-overflow: ellipsis 没用，它只是“省略号开关”，真正起作用的是三件套的协同：必须同时满足宽度限制、强制不换行、隐藏溢出。缺一不可。
-
width或max-width（必须有明确的块级宽度，百分比、px、rem都行，但不能是auto） -
white-space: nowrap（禁止文本换行，否则省略号永远不会触发） -
overflow: hidden（隐藏超出部分，这是 ellipsis 的前提行为）
常见错误：只加了 text-overflow: ellipsis，但父容器是 display: inline 或没设 width，结果完全没反应。
为什么在Flex或Grid容器里 text-overflow 失效
Flex 项和 Grid 项默认具有“最小内容宽度”（min-width: auto），会撑开容器，导致 width 约束被绕过，overflow: hidden 实际不起作用。
- 解决方法：给文字容器显式设置
min-width: 0（Flex）或min-width: 0/min-height: 0（Grid） - 更稳妥的做法：用
flex: 0 1 auto配合min-width: 0，避免 Flex 基线拉伸 - 不要依赖
overflow: hidden在父 Flex 容器上——它不会向下传递到子元素的文本渲染逻辑
典型现象：文字明明超长，却直接折行或撑宽整个卡片，控制台检查发现 width 计算值远大于预期。
多行省略用 text-overflow 吗？不能，得换方案
text-overflow: ellipsis 只支持单行。想实现两行或三行截断+省略号，CSS 原生只有 display: -webkit-box 这一条路，且仅限 WebKit 内核（Chrome/Safari/Edge 新版可用，Firefox 不支持）。
- 必需组合：
display: -webkit-box+-webkit-line-clamp: 2+-webkit-box-orient: vertical+overflow: hidden - 注意：
-webkit-line-clamp是“最大行数”，不是“固定行数”，内容不足时不会补空行 - 无 WebKit 兼容需求时，只能用 JS 截取字符/字数 + 插入
…，或者服务端预处理
别试 line-clamp 的标准语法（还没进正式规范），目前所有浏览器都不认 line-clamp 不带 -webkit- 前缀的写法。
中文/中英文混排下省略号位置不准或显示异常
根本原因是字体度量（font metrics）和浏览器对 text-overflow 的像素级截断逻辑。尤其在使用非等宽字体、字号小于 14px、或设置了 letter-spacing 时，省略号可能被切掉一半，或末尾多出一个空格。
- 优先用
font-family中靠前的系统字体（如"-apple-system", "Segoe UI"），避开某些 Web 字体的度量缺陷 - 避免对文字容器设
padding-right过小（），留出省略号绘制空间 - 如果用了
transform: scale()或zoom，会干扰截断计算，禁用 - Firefox 下偶发省略号不显示：确认没开启
font-feature-settings: "kern"类高级特性，它们可能影响字距重排
最隐蔽的坑：某些 CSS-in-JS 库（比如早期 styled-components）动态插入样式时，若 text-overflow 规则被拆成多条声明，可能导致浏览器解析顺序错乱，建议合并成单条规则书写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
