text-overflow: ellipsis 必须配合 width/max-width、white-space: nowrap 和 overflow: hidden 才生效；多行需用 -webkit-line-clamp；长单词需 overflow-wrap: break-word 或 word-break: break-all；flex/grid 中子项要设 min-width: 0。
text-overflow: ellipsis 必须配合哪些 CSS 属性才生效
text-overflow: ellipsis 单独写是没用的，它只负责“显示省略号”，但不控制“什么时候该省略”。必须同时满足三个条件：
-
width或max-width（块级元素需有明确宽度） -
white-space: nowrap（强制单行，防止换行破坏截断逻辑） -
overflow: hidden（隐藏溢出内容，否则省略号不会出现）
缺任意一个，text-overflow: ellipsis 都不会起作用。常见错误是只写了 text-overflow 和 overflow: hidden，却忘了 white-space: nowrap，结果文字照常换行，省略号根本不出现在末尾。
多行文本想用省略号怎么办
text-overflow: ellipsis 原生只支持单行。多行需要变通方案，目前最可靠的是使用 -webkit-line-clamp（仅 WebKit 内核，Chrome/Safari/Edge 新版本支持，Firefox 仍不支持）：
.multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 显示 2 行 */
overflow: hidden;
}注意：-webkit-line-clamp 必须配合 display: -webkit-box 和 -webkit-box-orient: vertical 才能生效；height 不能设固定值，否则可能截断不准确；如果内容高度不一致（比如含图片或行高变化），截断位置容易偏移。
立即学习“前端免费学习笔记（深入）”；
英文单词或长 URL 溢出不换行导致省略号失效
即使写了 white-space: nowrap，遇到超长无空格字符串（如 https://example.com/very-long-path-with-no-slash-or-space），浏览器仍可能不触发省略，因为默认 overflow-wrap: normal 不允许断词。
解决办法是加一句：
overflow-wrap: break-word; /* 或更激进的 */ word-break: break-all;
区别在于：overflow-wrap: break-word 只在必要时断词（优先保持单词完整），word-break: break-all 会强行在任意字符处截断，适合纯数字或 token 类文本。别漏掉 hyphens: auto —— 它对英文断词友好，但兼容性较差（IE 不支持，Safari 需前缀）。
Flex/Grid 容器里 text-overflow 失效的典型场景
在 display: flex 或 display: grid 的子项中，如果未显式设置 min-width: 0（flex）或 min-width: 0/min-height: 0（grid），浏览器会默认让子项不收缩，导致 width 限制被忽略，text-overflow 失效。
修复方式很简单：
.flex-item {
min-width: 0; /* 关键！ */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}这个 min-width: 0 是 Flex/Grid 布局下省略号能否工作的隐形开关，很容易被忽略。尤其当父容器用了 flex: 1 或 grid-template-columns: 1fr 时，问题必现。
