根本原因是grid子项默认min-width: auto拒绝收缩，必须显式设置min-width: 0解除保护，再配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及明确宽度约束四者缺一不可。
Grid 子项默认不收缩，overflow: hidden 形同虚设
根本原因不是 text-overflow: ellipsis 在 Grid 里“不支持”，而是子项默认 min-width: auto——它宁可把整个网格轨道撑开，也不愿缩小自己。结果就是：即使写了 width: 100%、white-space: nowrap 和 overflow: hidden，浏览器依然找不到“溢出边界”，text-overflow 完全没机会触发。
常见错误现象：
- 长英文或无空格字符串（如 URL、UUID）直接突破
1fr轨道，挤窄相邻列 - DevTools 里看到 computed
width是远大于容器的值，而非预期的像素数 - 删掉
grid-template-columns改用display: block后省略号立刻生效——说明问题出在 Grid 的收缩策略上
必须加 min-width: 0，且只加在目标子项上
min-width: 0 是唯一能解除 Grid 子项“拒绝收缩”保护的开关。它不是写在容器上，而是写在你要省略的文本元素本身（比如 .grid-item__title）。
典型修复写法：
.grid-item__title {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%; /* 或 max-width: 100% */
}
注意点：
- 如果该子项内部还嵌了
flex或grid，它的直接子元素也可能需要min-width: 0 - 别用
min-inline-size: 0替代——虽然语义更准，但 Safari 15.4 及更早版本不认 - 在
grid-template-columns: 1fr 2fr下，width: 100%就够；但在auto-fit或minmax()场景下，建议补max-width: 100%更稳妥
中文/日文等无空格语言下仍可能失效
即使配齐 min-width: 0 + white-space: nowrap + overflow: hidden + text-overflow: ellipsis，一整段没有空格的中文或日文仍可能不显示省略号。这不是 Grid 特有 bug，而是浏览器将连续汉字视为“不可断行词”，导致 white-space: nowrap 实际未形成有效单行约束。
临时缓解方式：
- 对内容做预处理，在长段落中插入零宽空格（
），例如：这是一段很长的中文文本 - 用
word-break: break-word替代white-space: nowrap——但会失去“强制单行”语义，慎用于标题类场景 - 服务端截断 + 后缀加
…，绕过纯 CSS 方案的底层限制
响应式宽度变化时，CSS 无法自动重排隐藏顺序
当用户拖拽调整窗口、或容器宽度动态变化（比如侧边栏收起），Grid 轨道会重新分配空间，但 CSS 无法决定“先裁哪一列”。比如你希望优先保留 ID 列和图标列，最后才裁摘要列——这必须靠 JS 控制 display: none 的切换时机。
关键逻辑：
- 监听
resize或使用ResizeObserver - 按预设优先级顺序检查各列实际宽度是否低于阈值（如
clientWidth ） - 用
.grid-container > div:nth-child(3)这类选择器控制显隐，避免用 class 动态增删 - 绝对不要用
visibility: hidden，它仍占轨道空间，会导致布局错位
最常被忽略的一点：所有这些样式都必须作用在文本所在的**最终渲染元素**上，而不是中间某层包装 div。Grid 布局的嵌套层级越深，min-width: 0 漏写的概率越高——调试时直接看 computed 样式里的 min-width 和 width 是否匹配预期，比猜更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
