overflow-wrap: break-word在Grid中不生效，是因为grid item默认min-width: auto会锁定最小宽度，必须设min-width: 0覆盖才能解锁换行；也可用overflow: hidden间接重置，或改用overflow-wrap: anywhere实现更激进断行。
为什么 overflow-wrap: break-word 在 Grid 里不生效
不是你写错了，是 Grid 项默认的 min-width: auto 在“拦着”换行。这个值等于内容的固有最小宽度（比如一个 50 字符的 URL），浏览器会优先满足它，导致 overflow-wrap: break-word 完全被忽略——哪怕容器明明很窄。
必须加 min-width: 0 才能解锁换行
这是最直接、副作用最小的解法，作用于文本所在的 grid item（即 .card-description 这类直接子元素）：
-
min-width: 0覆盖掉默认的min-width: auto，让容器尺寸真正受父级约束 - 之后
overflow-wrap: break-word才能正常工作 - 必须确保该元素是 grid 容器的 direct child；如果中间嵌套了
<div>或<span>，就得加在那一层上 - 别在 grid 容器（如
.card）上设min-width: 0，那会影响整个布局逻辑
overflow: hidden 是快捷替代方案，但有隐含代价
给文本元素自身设 overflow: hidden，CSS Grid 规范会隐式把它 min-width 和 min-height 都重置为 0，从而间接启用换行：
- 代码更少，适合纯展示场景
- 但会隐藏所有溢出内容，无法配合
text-overflow: ellipsis或 tooltip 使用 - 如果该元素将来要加滚动条或动画，这个设置会冲突
- 注意：必须设在文本元素上，不是它的父容器
overflow-wrap: anywhere 比 break-word 更激进，慎用
overflow-wrap: anywhere 允许在任意字符之间断行（包括英文单词中间），比 break-word 更容易“挤”进窄容器：
立即学习“前端免费学习笔记（深入）”；
- 适合技术 ID、哈希值、无空格 base64 字符串等场景
- Chrome 76+、Firefox 69+、Safari 15.4+ 支持；IE 完全不支持
- 对普通英文段落可能造成语义断裂（比如 “international” 拆成 “inter-nation-al”），视觉上不自然
- 它不能代替
min-width: 0—— 如果没解决根本的尺寸约束，照样不换行
最容易被忽略的是：这些样式只对块级元素生效。如果文本包在 <span> 或其他 inline 元素里，得先加 display: block 或 display: inline-block，否则连 min-width 都不认。
