text-overflow: ellipsis本身不生效，它只是“省略号开关”，必须与width（或max-width）、white-space: nowrap、overflow: hidden三者协同作用才有效；缺一不可，且需作用于同一块级元素。
text-overflow: ellipsis 本身不生效，它只是“省略号开关”，真正起作用的是三件套协同：必须同时满足 width（或 max-width）、white-space: nowrap、overflow: hidden —— 缺一不可。
为什么只写 text-overflow: ellipsis 没反应？
浏览器会静默忽略这个声明。常见错误包括：
• 给 <span> 这类默认 display: inline 的元素直接加 text-overflow
• 父容器没设宽度，或者用了 width: auto
• 忘了 white-space: nowrap，文本直接折行，根本不会溢出
• overflow 设成了 visible 或没写，导致内容外露，ellipsis 失去触发条件
white-space: nowrap 和 overflow: hidden 的顺序重要吗？
不重要，但逻辑上建议按渲染流程写：
• 先用 white-space: nowrap 确保文本被压成一行
• 再用 overflow: hidden 切掉超出部分
• 最后 text-overflow: ellipsis 告诉浏览器“被切掉的地方显示…”，而不是直接裁剪
注意：overflow: hidden 必须作用在**同一元素**上，不能只写在父容器——子元素的文本渲染不受父级 overflow 影响
Flex 容器里 text-overflow 失效怎么办？
这是高频坑点。Flex 项默认 min-width: auto，会撑开自身宽度，绕过你设的 width，导致 overflow: hidden 实际无效。
解决方式：
• 给文字容器显式加 min-width: 0（最简方案）
• 或用 flex: 0 1 auto + min-width: 0，兼顾收缩性和基线对齐
• 避免把 overflow: hidden 放在 Flex 父容器上——它不会传递到子元素的文本截断逻辑
• 不要依赖 display: flex 自动处理宽度，width 或 max-width 仍需明确设置
中文小字号下省略号被切半或位置偏移
这不是 bug，是字体度量和浏览器像素截断逻辑导致的：
• 字号 • 启用了 letter-spacing 或用了非系统字体（如某些 Web Font），会干扰截断位置
• 解决思路优先级：用 font-family: -apple-system, "Segoe UI", system-ui 等靠前的系统字体；避免在省略容器内设 letter-spacing；必要时微调 width 值（比如从 200px 改成 198px）
• text-overflow: ellipsis 是基于像素边界截断的，不是字符数，所以中英文混排时末尾空格、标点都可能影响显示效果
立即学习“前端免费学习笔记（深入）”；
