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> 或 <code><span></span>，就得加在那一层上
• 别在 grid 容器（如 .card）上设 min-width: 0，那会影响整个布局逻辑

overflow: hidden 是快捷替代方案，但有隐含代价

给文本元素自身设 overflow: hidden，CSS Grid 规范会隐式把它 min-width 和 min-height 都重置为 0，从而间接启用换行：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 代码更少，适合纯展示场景
• 但会隐藏所有溢出内容，无法配合 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></span> 或其他 inline 元素里，得先加 display: block 或 display: inline-block，否则连 min-width 都不认。