根本原因是grid item默认min-width: auto锁定最小宽度，必须显式设min-width: 0才能解锁换行；也可用overflow: hidden间接重置，或改用overflow-wrap: anywhere实现更激进断行。
Grid 中内容被挤压却不换行，根本不是 overflow-wrap 没起作用，而是网格项默认的 min-width: auto 在“护短”——它强行把整个长单词或 URL 当作不可分割的最小单位，死守这个宽度不放手，导致容器再窄也拒绝折行。
为什么 overflow-wrap: break-word 在 Grid 里失效
这不是浏览器 bug，是 CSS Grid 规范明确规定的尺寸计算逻辑：每个 grid item 默认 min-width: auto，其值等于内容的 min-content width（比如一个 50 字符无空格的哈希串，就是整整 50 字符宽）。此时即使你写了 overflow-wrap: break-word，浏览器也会优先满足 min-width 约束，换行自然被跳过。
- 只对直接子元素生效：必须加在 grid 容器的 direct child 上，比如
.card-description，而不是嵌套在它里面的 - 不适用于
white-space: nowrap或display: inline元素：这些会主动禁用换行机会 -
word-break: break-word是旧写法，语义不如overflow-wrap清晰，且在部分 Safari 版本中行为不稳定
必须设置 min-width: 0 才能解绑默认约束
这是最直接、副作用最小的修复方式。显式覆盖掉 min-width: auto，让浏览器重新允许内容按需收缩并触发 overflow-wrap。
- 加在文本所在 grid item 上，例如：
.grid-item { min-width: 0; overflow-wrap: break-word; } - 不要加在父容器（如
.grid）上——那会影响所有轨道，可能破坏列宽分配 - 如果该 item 还用了
flex或inline-flex，同样需要min-width: 0，原因一致
用 overflow: hidden 替代 min-width: 0 的隐患
这个技巧确实有效：CSS 规范规定，只要 grid item 设置了 overflow: hidden（或 scroll、auto），就会隐式把 min-width 和 min-height 重置为 0。
- 写法更短：
.grid-item { overflow: hidden; overflow-wrap: break-word; } - 但会同时裁剪掉所有溢出内容——如果你依赖 tooltip、滚动条、或
text-overflow: ellipsis，这个方案就不可逆 - 若后续要加动画、transform 或 backdrop-filter，
overflow: hidden可能意外触发新的层叠上下文或裁剪边界
换行策略选 break-word 还是 anywhere
overflow-wrap: anywhere 比 break-word 更激进：它允许在任意两个字符之间断行（包括英文单词中间），不依赖空格或连字符。
- 适合纯技术场景：API key、commit hash、base64 字符串等“必须完整显示+不能溢出”的内容
- 不适合普通正文：
explanation可能被拆成ex- planation，影响可读性 - 兼容性注意：
anywhere在 Safari 16.4+ 和 Chrome 109+ 支持良好，但旧版 Edge 和 Firefox 需用word-break: break-all回退（语义不同，慎用）
真正容易被忽略的点是：这个现象只发生在 grid item 是文本直接父容器时；如果中间还包了一层 或 ，而你只给外层设了 min-width: 0，内层仍受默认约束——得逐层检查 DOM 结构，确保样式落在正确的节点上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
