text-overflow: ellipsis 必须配合 white-space: nowrap 和 overflow: hidden 才生效，且容器需有明确宽度；flex 容器中需加 min-width: 0 防止伸缩；多行省略需用 -webkit-line-clamp；中文省略号异常常因行高、字体或右间距不足导致。
text-overflow: ellipsis 必须配合 white-space: nowrap 才生效
单独写 text-overflow: ellipsis 没用，浏览器根本不会触发省略逻辑。它只负责“怎么显示省略号”，但不控制“要不要换行”或“文字要不要收缩”。真正决定单行的是 white-space 和 overflow 的组合。
-
white-space: nowrap是硬性要求——它让文本拒绝换行，强制挤在一行里 -
overflow: hidden也必须加——否则超出部分会直接溢出容器，text-overflow压根没机会工作 - 容器得有明确宽度（
width、max-width或受父级约束），否则“超出”无从判断
flex 容器里 text-overflow 失效的常见原因
把文字放在 display: flex 的子元素中时，即使写了 white-space: nowrap 和 overflow: hidden，省略号仍可能不出现。本质是 flex 项默认会伸缩，撑开容器，绕过了“截断”前提。
- 给文字所在元素加
min-width: 0或overflow: hidden（双重保险） - 避免对文字元素设
flex: 1且不配min-width: 0，否则它会优先占满可用空间 - 如果父容器是
flex，文字元素又用了flex: 1，那就必须加min-width: 0，否则text-overflow彻底失效
多行省略不能靠 text-overflow 实现
text-overflow: ellipsis 只支持单行。想实现两行或三行末尾省略，得用 WebKit 私有属性 -webkit-line-clamp，且它只在 display: -webkit-box 下有效。
- 必须同时设置：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2 -
overflow: hidden仍需保留，但white-space: nowrap要去掉（否则会强制单行） - 该方案在 Firefox 和旧版 Safari 中兼容性差，IE 完全不支持；现代项目建议用 JS 方案或服务端截断兜底
中文省略号显示异常或被截半
有时看到省略号显示为 “…” 的一半（比如只显示一个点），或和文字贴得太近，甚至被字体裁切。这不是 CSS 写错了，而是字体度量和渲染细节问题。
立即学习“前端免费学习笔记（深入）”；
- 确保容器高度足够容纳行高，比如
line-height: 1.5时，height至少设为1.5em或具体像素值 - 某些字体（尤其非等宽中文字体）对
text-overflow渲染不友好，可尝试加padding-right: 0.2em预留一点右空隙 - 不要依赖
font-size自动推算省略位置——浏览器按字符宽度累加判断截断点，中文字符宽度未必一致
overflow: hidden，或者在 flex 场景下没加 min-width: 0。这三个点占了调试时间的八成。 
