根本原因是 grid 子项默认 min-width: auto，必须显式设 min-width: 0 才能激活 overflow、white-space、text-overflow 等截断样式，且需作用于直接子元素并确保块级上下文。
为什么 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）上完全无效 - 不能用
width: 0替代——它会破坏布局流，可能让元素塌陷或错位 - 搭配
fr单位列时尤其关键：不设min-width: 0，长文本会直接把整列拉宽，无视其他轨道分配
text-overflow: ellipsis 在 grid 中不显示省略号的三个硬性条件
缺一不可，且顺序无关紧要，但全部要作用于同一元素：
-
min-width: 0（解除最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden+text-overflow: ellipsis（触发截断与省略） - 该元素还需是块级上下文：
display: block或inline-block；若被重置为inline或flex，需额外确认是否满足渲染条件
要不要用 word-break: break-all 替代
可以，但语义不同：
-
word-break: break-all会在任意字符中间断行（包括中文、URL 中的字母），适合 token、哈希值等无阅读意义的字符串 - 它同样依赖
min-width: 0才能生效；不加的话，在fr列中仍可能撑破 - Safari 对
break-all在 grid/flex 中的支持曾有 bug，iOS 15+ 基本稳定，但建议在目标环境实测 - 如果内容需要可读性（如用户名、标题），优先选
text-overflow: ellipsis，别为了省事强行 break-all
最容易被忽略的是：你改了 CSS，但浏览器缓存了旧样式，或者开发工具里看到的 computed 值没刷新。真遇到不生效，先检查 computed 栏里 min-width 是否确实是 0，而不是 auto 或继承来的其他值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
