text-overflow: ellipsis 在 grid 子项中生效需同时满足三个前提：overflow: hidden、white-space: nowrap、width 或 max-width 约束，且子项应设 min-width: 0 以允许收缩。
grid 容器中 text-overflow: ellipsis 不生效的典型原因
直接加 text-overflow: ellipsis 在 grid 子项上大概率没反应，不是写错了，而是缺了三个硬性前提：块级格式化上下文、固定宽度（或 max-width）、以及 white-space: nowrap。Grid 本身不改变子元素的 inline 特性，如果子项是 span 或未设 display: block，截断逻辑根本不会触发。
必须同时设置的三个 CSS 属性
只写 text-overflow: ellipsis 是无效的。它依赖一组协同工作的声明：
-
overflow: hidden—— 必须显式设置，不能靠父容器“继承”或“隐含” -
white-space: nowrap—— 强制单行，否则换行会优先于省略 -
width或max-width—— 必须有明确的横向约束；在 grid 中，这通常来自grid-template-columns的列宽定义，但子项自身仍需width: 0或具体值来配合收缩行为
grid-column 设置影响 width 计算的隐藏细节
当子项跨越多列（如 grid-column: 1 / -1），它的可用宽度由网格轨道决定，但若该轨道本身是 minmax(auto, 1fr) 或 fit-content()，实际渲染宽度可能超出预期，导致 ellipsis 失效。更可靠的做法是：
- 用
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr)替代1fr 2fr，让列能真正收缩 - 子项加
min-width: 0（尤其在 flex/grid 嵌套场景下） - 避免对子项设
width: 100%—— 它可能撑开网格轨道，破坏截断前提
完整可运行的最小示例
下面这段代码能在所有现代浏览器中稳定触发省略效果：
立即学习“前端免费学习笔记（深入）”；
.grid {
display: grid;
grid-template-columns: 200px 1fr;
gap: 8px;
}
.grid > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0; /* 关键：允许内容收缩 */
}注意：如果把 200px 换成 1fr，就必须同步给该列加 minmax(0, 1fr)，否则 min-width: 0 仍可能被忽略。
最常被跳过的其实是 min-width: 0 —— 它不是装饰，而是告诉浏览器：“这个格子可以压缩到比内容还窄”，没有它，grid 子项默认按内容最小宽度撑开，ellipsis 就永远等不到触发时机。
