根本原因是Grid子项默认min-width: auto锁定最小宽度，使浏览器未进入换行判断流程；必须显式设置min-width: 0（作用于.grid > .item），才能释放压缩权并激活overflow-wrap: break-word。
为什么overflow-wrap: break-word在Grid里不生效
不是属性写错了，而是浏览器根本没走到“要不要换行”这步——Grid子项默认min-width: auto，它会把整段无空格文本（比如eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9）当做一个不可压缩的最小单元。你加了overflow-wrap: break-word，但容器已经被拉宽到能塞下它为止，自然没机会触发换行。
验证方法：打开DevTools → 选中元素 → 切到Computed面板 → 搜索min-width，如果值仍是auto，就是它了。
临时加min-width: 0和border: 1px solid red，列宽立刻回归等分，就能确认问题根源。
必须在.grid > .item上设min-width: 0
这个样式不能只写.item，也不能加在父容器.grid上，否则要么污染其他上下文，要么完全无效。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- 子项内部嵌套了
display: flex容器 → 它自己也得加min-width: 0，否则撑开会逐层传导 - 用了
repeat(auto-fit, 1fr)→ 必须同步改成repeat(auto-fit, minmax(0, 1fr))，否则轨道定义层就锁死了收缩能力 - 移动端X5内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代break-word
word-break: break-all和overflow-wrap: break-word怎么选
它们不是互换关系，是语义分工：
-
overflow-wrap: break-word：适合用户可见内容，如长链接、邮箱、带连字符的术语，只在必要时折行，不会在.或/前硬切 -
word-break: break-all：专治base64、哈希、API路径这类无语义字符串，但会把中文切成单字，务必限定作用范围（比如只加在.token-value类上） - 两者都依赖
min-width: 0才能真正起效；不加它，break-all在1fr列里也可能失效
让text-overflow: ellipsis生效的四个硬条件
少一个都不行，而且顺序不重要，缺一不可：
-
min-width: 0（解除Grid子项最小宽度保护） -
white-space: nowrap（禁止换行） -
overflow: hidden（隐藏溢出部分） -
width或max-width（提供截断依据，不能是auto）
最容易漏掉的是第一项。没它，其余三个全加也没用——浏览器根本没获得“压缩权”，连开始计算截断的机会都没有。
图片、<iframe>、<canvas>这些替换元素同样有隐式min-width: auto，也要单独加max-width: 100%和height: auto处理。
