根本原因是grid子项默认min-width:auto（≈min-content宽度），浏览器优先撑开列宽而非截断换行；必须在直接子元素上设min-width:0作为开关，并配合white-space:nowrap、overflow:hidden、text-overflow:ellipsis及明确宽度约束才生效。
为什么 grid 子项文字撑破列宽
根本原因不是 overflow 没写对，而是 grid 子项默认带 min-width: auto（实际表现≈内容最小宽度），浏览器宁可撑开列也不截断或换行。哪怕你写了 white-space: nowrap、overflow: hidden、text-overflow: ellipsis，只要没加 min-width: 0，这些声明全被忽略。
min-width: 0 是溢出控制的「开关」
min-width: 0 必须写在直接子元素（即 .grid-item）上，写在容器（.grid-container）上完全无效：
- 它不是“让元素变窄”，而是解除浏览器硬编码的收缩下限，把收缩底线重置为 0
- 不加它，
1fr分配逻辑形同虚设——轨道宽度由内容决定，不是由fr决定 - 用开发者工具检查
Computed面板，确认min-width真实值是否已变成0px，而不是auto或继承值
只加 min-width: 0 为什么还是溢出
min-width: 0 是“解锁收缩”的钥匙，但不是“自动省略”的开关。它必须和以下样式同时作用于同一元素才触发完整截断链：
-
white-space: nowrap：必须写在这里，不能靠父级继承 -
overflow: hidden：裁剪动作本身，但若min-width: auto还在锁着宽度，文本根本没溢出 -
text-overflow: ellipsis：只对块级元素生效；span类行内元素需先加display: block - 该元素还需有明确宽度约束——来自
grid-template-columns、max-width或父容器尺寸
嵌套 flex 或 grid 时容易漏掉的关键层
如果 .grid-item 内部又用了 display: flex 或 display: grid，那个内部容器也受 min-width: auto 保护，必须单独再加 min-width: 0：
- 撑开行为会逐层传导：外层加了
min-width: 0，内层没加，照样顶宽 - 第三方组件（如 Ant Design 的
Card、Tag）默认不带min-width: 0，得手动覆盖 - React 中用
styled-components包装时，样式必须落在真实 DOM 节点上，不能只作用于包装器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
