text-overflow: ellipsis 正常显示需同时满足四个条件：显式设置宽度、white-space: nowrap、overflow: hidden、display 为 block/inline-block；多行省略还需 -webkit-box 相关属性配合。
文字溢出本身不直接“影响”省略号显示，但省略号能否正常出现，完全取决于你是否满足了溢出处理的三个硬性条件。漏掉任何一个，text-overflow: ellipsis 就是摆设。
单行省略号失效的常见原因
很多人写了 text-overflow: ellipsis 却没效果，根本不是属性写错，而是容器没配齐配套规则：
-
width（或max-width）必须显式设置 —— 百分比、fit-content或无宽度的 flex 项都不行 -
white-space: nowrap缺失 —— 中文虽会折行，但没这句，text-overflow直接被忽略 -
overflow: hidden被覆盖 —— 比如父级用了overflow: visible，或者自己加了overflow: auto，都会让省略号消失 - 元素是 inline 级别（比如
<span>）—— 必须先变成display: block或inline-block才能生效
多行省略号为什么只在 Chrome/Firefox 里稳定
-webkit-line-clamp 是 WebKit/Blink 内核专属属性，Firefox 从 68+ 开始支持，但 Safari 仍要求严格匹配以下组合：
-
display: -webkit-box（不能用display: flex替代） -
-webkit-box-orient: vertical（漏掉或写成horizontal都无效） -
-webkit-line-clamp: N（N 是整数，不能是变量或 calc） -
overflow: hidden和text-overflow: ellipsis缺一不可
Edge 和旧版 IE 完全不支持；即使现代浏览器，如果父容器有 transform、filter 或 will-change，也可能导致截断失效。
立即学习“前端免费学习笔记（深入）”；
overflow: hidden 和 text-overflow: ellipsis 不是一回事
这是最容易混淆的点：overflow: hidden 只管“裁掉”，不管“怎么裁”；text-overflow: ellipsis 只管“最后怎么标”，不管“裁不裁”。它们分工明确：
- 没有
overflow: hidden，text-overflow什么也不干 —— 即使文本真的超出了，也照常显示 - 有
overflow: hidden但没text-overflow: ellipsis，文本会被粗暴裁切，边缘可能卡在字母中间，毫无可读性 -
text-overflow: clip是默认行为，等价于不写这一句；只有显式写ellipsis才启用省略号逻辑
响应式下省略号容易崩的两个隐藏细节
在媒体查询或 flex/auto-layout 场景中，省略号失效往往不是代码问题，而是尺寸计算时机不对：
- 用
max-width+vw单位时，某些安卓 WebView 在页面重绘前会误判宽度，导致第一帧不显示省略号 - 在
display: flex容器里，子项若没设flex-shrink: 1（默认是 1），遇到空间不足时可能拒绝压缩，white-space: nowrap失效，省略号就没了 - 动态插入内容后没触发重排（比如用
textContent更新），需要手动offsetHeight触发回流，否则新文本不会重新计算截断
真正难的从来不是写对那三行 CSS，而是在各种布局上下文里，确保这三行始终处于“生效状态”。尤其当容器宽高由 JS 控制、或嵌套在动画/transition 中时，省略号就是第一个暴露问题的信号灯。
