text-overflow: ellipsis生效必须同时满足三个条件：容器有明确宽度（如width/max-width）、white-space: nowrap、overflow: hidden；缺一不可，否则文字换行、撑开容器或完全无反应。
text-overflow: ellipsis 能生效，但必须同时满足三个硬性条件：容器有明确宽度、white-space: nowrap、overflow: hidden。缺一不可，否则只会看到换行、撑开容器或完全无反应。
为什么写了 text-overflow: ellipsis 却没出现省略号？
最常见原因是只加了 text-overflow，其他两个关键属性没跟上。浏览器不会报错，而是直接忽略该声明。
-
white-space: nowrap缺失 → 文字在空格/换行符处自动折行，根本不会“溢出到单行末尾”，text-overflow失去触发前提 -
overflow: hidden缺失 → 溢出内容照常显示，没有“裁剪区域”，自然也不需要省略号 - 宽度未设（如
width: auto或父容器未约束）→ 浏览器无法判断“哪里算溢出”，整个逻辑链断裂
text-overflow: ellipsis 对元素类型有要求吗？
是的，它只对块级渲染上下文生效。内联元素（比如默认 span、a）即使加了所有属性也不会显示省略号。
- 必须显式设置
display: block或display: inline-block - Flex 子项要额外注意：
min-width: 0常被忽略，否则 flex 会阻止收缩，导致宽度约束失效 - IE6–8 需要
zoom: 1触发 hasLayout（现已极少需兼容）
多行文本能用 text-overflow: ellipsis 吗？
不能。原生 text-overflow 只作用于单行内联方向的溢出，和行数无关。所谓“多行省略”方案本质是借力：
-
-webkit-line-clamp是 WebKit/Blink 私有属性，依赖display: -webkit-box，Firefox 和旧 Edge 完全不支持 - 伪元素 +
position: absolute方案靠高度截断，但省略号位置难对齐、中英文混排时易错位 - 服务端截断或 JS 动态计算（如
getBoundingClientRect()+ 二分截取）更可控，但增加运行时开销
省略号是三个点还是 Unicode 字符？
是 U+2026（…），不是三个英文句点 ...。视觉上更紧凑，语义更准确，且能被屏幕阅读器识别为“内容被截断”。
如果用 text-overflow: string 自定义，传入的字符串也必须是合法字符序列，且部分浏览器对非 ASCII 字符支持不稳定。
真正容易被忽略的是：这个省略号只出现在行尾，且必须由浏览器主动渲染——它不是你写死的 DOM 内容，所以无法用 JS 直接获取或监听其出现时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
