text-overflow: ellipsis 必须与 white-space: nowrap、overflow: hidden 和明确宽度（width/max-width）三者共存才生效；缺一不可，否则因文本换行、溢出可见或无溢出判定基准而失效。
text-overflow: ellipsis 本身不生效，必须和 white-space: nowrap、overflow: hidden、明确宽度三者共存，缺一不可。
为什么只写 text-overflow: ellipsis 没反应？
这不是语法错误，而是浏览器渲染逻辑没被触发：
-
white-space: nowrap缺失 → 文字照常换行，根本“溢不出” -
overflow: hidden缺失 → 即使溢出也全显示，省略号无从谈起 - 容器没设
width或max-width→ 浏览器无法判断“哪里算超出”，默认撑开 - 用在
这类 inline 元素上 → 必须加display: inline-block或block，否则 width 不生效
white-space: nowrap 是单行省略的核心开关
它强制文本挤成一行，是 text-overflow: ellipsis 起效的前提。但要注意副作用：
- 长单词（如 URL、邮箱）可能撑破容器 → 可加
overflow-wrap: anywhere或word-break: break-all辅助断词 - 在 flex 布局中，子项默认
min-width: auto，会顶开父容器 → 需显式设min-width: 0或flex-shrink: 0 - 若容器本身是
table-cell，white-space: nowrap仍有效，但text-overflow在部分旧版 IE 中需加-ms-text-overflow: ellipsis
多行省略不能只靠 text-overflow
CSS 标准里没有 text-overflow: ellipsis 的多行版本。所谓“多行省略”实际依赖 WebKit 私有属性：
-
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2是当前最常用组合 - Firefox 68+ 开始支持
-webkit-line-clamp，但旧版 Firefox 和部分 Edge 完全不识别 → 必须 JS 回退 - 响应式场景下，字体缩放或
rem动态变化时，-webkit-line-clamp容易截多或截少 → 更稳的做法是服务端截断，或前端用getBoundingClientRect()+ 字符遍历测算
真正容易被忽略的点：省略号不是视觉装饰，它是渲染流程中一个“条件触发”的结果。一旦容器尺寸、布局上下文或文字排版规则稍有变动（比如加了 transform、用了 contain: layout、或者父级设置了 direction: rtl），都可能让那三个点悄然消失。调试时别只盯 CSS，先看 computed styles 里 width、white-space、overflow 是否真按预期计算出来了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
