text-overflow: ellipsis 单独无效，必须同时满足 white-space: nowrap、overflow: hidden 和明确宽度（width 或 max-width）；缺一不可，且需作用于文本所在元素自身。
text-overflow: ellipsis 单独写完全没用，浏览器直接忽略。它必须和 white-space: nowrap、overflow: hidden、明确的宽度（width 或 max-width）三者同时存在才可能生效。
为什么写了 text-overflow: ellipsis 却没省略号
这不是语法错，是渲染条件没凑齐：
-
white-space: nowrap缺失 → 文字照常换行，“溢出”压根不成立 -
overflow: hidden缺失（比如是visible或auto）→ 溢出内容全显示，省略号无触发依据 - 容器没设
width/max-width→ 浏览器无法判断“哪里算超出”，默认撑开宽度 - 元素是
display: inline→width不生效，得先加display: inline-block或block
overflow 必须作用于文本所在元素本身
常见翻车点：把 overflow: hidden 写在父容器上，子元素文字依然满屏跑。
- 省略逻辑只在“自身有剪裁上下文”的元素上运行
- 表格单元格（
td）里直接加这三属性有时不生效，得额外加table-layout: fixed - Flex 子项若用了
flex: 1，需显式加min-width: 0，否则默认min-width: auto会顶开宽度 - 绝对定位元素若没设
left/right或width，宽度退化为内容宽，text-overflow失效
多行省略只能靠 -webkit-line-clamp，且 Firefox 支持有限
原生 text-overflow 不支持多行。目前唯一可行组合是：
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
-
-webkit-line-clamp: 2表示最多显示 2 行，超出部分隐藏并加省略号 - Firefox 117+ 才开始支持该属性，旧版 Firefox 和部分 Edge 完全不识别
- 响应式场景下字体缩放或 rem 变化时，
-webkit-line-clamp容易截多或截少 - 真正容易被忽略的是：省略号不是视觉装饰，它是渲染流程中一个“条件触发”的结果。加了
transform、contain: layout、或父级设了direction: rtl，都可能让那三个点悄然消失
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
