网格项文字撑破列宽时，需在子项设 min-width: 0，再配合 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 才能生效；仅设 overflow 或仅在容器设 min-width: 0 均无效。
网格项内文字撑破 grid-template-columns 怎么办
直接原因是：CSS 网格容器默认不给子项设 min-width: 0，而文本类内容（尤其是无空格长串如 URL、base64、哈希值）会强制保持「最小宽度 = 内容本身宽度」，导致网格列被撑开，破坏布局。
根本解法不是靠 word-break 或 overflow 单独起作用，而是先解除子项的「最小宽度保护」：
- 在网格子项（即直接子元素）上加
min-width: 0 - 再配合
overflow: hidden（或text-overflow: ellipsis）才生效 - 仅设
overflow不加min-width: 0，绝大多数情况下完全无效
为什么 min-width: 0 是关键前提
因为 CSS 规范中，flex 和 grid 的子项默认 min-width: auto（实际表现接近 min-content），浏览器会优先保障内容完整显示，宁可撑破容器也不折行/截断。这和普通块级元素行为不同。
常见误操作：
- 只写
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;→ 无效 - 只在容器上设
min-width: 0→ 错对象，必须作用于网格子项自身 - 用
width: 0; min-width: 0;强制收缩 → 可能引发其他布局塌陷，不推荐
text-overflow: ellipsis 在网格里为啥不显示省略号
三个条件缺一不可，且顺序敏感：
- 子项必须有
min-width: 0 - 必须是块级上下文：设
display: block或inline-block（默认display: grid子项是block，但若被重置为inline就不行） - 必须同时满足：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis
示例正确写法：
.grid-item {
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
要不要用 word-break: break-all 替代
可以，但语义不同，适用场景有限：
-
word-break: break-all会在任意字符处换行（包括中文、字母中间），适合日志 ID、token 等无阅读语义的字符串 -
text-overflow: ellipsis更适合标题、用户名等需保留可读性的场景 - 两者都依赖
min-width: 0才能约束宽度；不加它，break-all也可能失效（尤其在fr单位列中） - 注意 Safari 对
break-all在 flex/grid 中的支持曾有 bug，建议测试 iOS 15+ 环境
真正容易被忽略的是：这个限制不是“网格专属”，而是所有弹性布局（flex/grid）子项的共性行为。只要用了 display: grid 或 display: flex，又含不可折行文本，就得主动处理 min-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
