中文本身不会撑宽grid列，真正原因是混入无空格长串或white-space:nowrap锁定换行，叠加子项默认min-width:auto；必须在.grid > .item上设min-width:0，否则text-overflow:ellipsis等均无效。
中文字符本身不会导致 Grid 单元格被异常撑宽——真正出问题的，是混入了无空格长串（如 URL、base64、JSON key）、或被 white-space: nowrap 锁死换行能力的中文容器，再叠加 Grid 子项默认的 min-width: auto。
为什么中文看起来“撑开了”1fr列？
这不是中文的问题，而是浏览器对「连续无换行机会内容」的统一处理逻辑：
- 中文每个字天然具备软换行机会，所以纯中文段落通常能正常折行
- 但一旦混入长英文单词、URL（如
https://api.example.com/v2/users/abcd1234567890）、或带连字符的 token，整段就变成一个“不可分割单元” - 此时若又设置了
white-space: nowrap（常见于表格标题、标签栏、代码片段），换行彻底被禁用 - 而 Grid 子项默认
min-width: auto，浏览器会强制让列宽 ≥ 这个不可分割单元的完整宽度 - 结果就是：一列被拉到 800px，另一列缩成 20px，
grid-template-columns: 1fr 1fr彻底失守
必须在.grid > .item上设min-width: 0
这是所有修复动作的前提开关。不加它，后续任何截断、换行、溢出控制都无效：
-
min-width: 0必须写在网格直接子元素上，例如.grid > .cell，不能只写.cell（避免污染非 Grid 上下文） - 不能用
width: 0替代——它会破坏布局流，可能让元素塌陷或错位 - 如果子项内部还嵌了
display: flex或display: grid容器，它们的直接子元素也得同步加min-width: 0，否则撑开会逐层传导 - 在 Safari 14.1 及更早版本中，
min-width: 0对某些替换元素有兼容性问题，建议搭配@supports (min-width: 0)做降级
text-overflow: ellipsis 和 word-break: break-word 怎么选？
取决于内容语义和可读性要求：
- 要保留标题、用户名、路径等可读性：用
text-overflow: ellipsis，但必须四者同存：min-width: 0+white-space: nowrap+overflow: hidden+max-width（不能是auto） - 要处理日志 ID、哈希值、base64 等无阅读意义字符串：用
word-break: break-all或更温和的overflow-wrap: break-word+word-break: break-word（CSS3 新值，Chrome 95+/Firefox 90+ 支持） - 两者都依赖
min-width: 0才能生效；不加它，在1fr列中break-all也可能失效 - 注意：Safari 对
break-all在 Grid/Flex 中的支持曾有 bug，iOS 15+ 已稳定，但建议实测目标环境
真正容易被忽略的是：你看到的“中文撑宽”，90% 是混入了不可折行的英文/数字串，且开发者工具里 min-width 的 computed 值仍是 auto——不是样式没写，是没写对位置。先打开 DevTools 的 Computed 面板确认这一点，比反复改 overflow 有效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
