Grid 子项需设 min-width: 0 才能使 overflow-wrap: break-word 生效，否则默认 min-width: auto 会阻止断行；必须配合 max-width: 100%、word-wrap: break-word 及检查 white-space 和嵌套容器的 min-width。
直接加 word-break: break-all 或 overflow-wrap: break-word 几乎一定没用——不是 CSS 写错了，而是 Grid 子项默认的 min-width: auto 在“扛着”内容不让它缩、不让它断。
为什么 word-break: break-all 在 Grid 里常失效
浏览器给每个 grid-item 隐式设了 min-width: auto（实际表现接近 min-content），遇到 https://verylongurlwithoutspaces 这类内容，宁可把整列拉宽，也不触发断行逻辑。你写的 word-break 根本没机会执行。
-
min-width: 0必须作用于grid-item自身，不是 Grid 容器 - 仅设
min-width: 0不够，还得有max-width: 100%或明确宽度，否则浏览器无换行依据 - 检查是否被
white-space: nowrap覆盖（常见于按钮、表格单元格、Ant Design 等组件库样式） - 如果
grid-item内还套了flex容器，那个子容器也得加min-width: 0，否则撑开会传导
让 overflow-wrap: break-word 真正生效的最小组合
它比 word-break: break-all 更安全：优先在空格、/、. 后换行，实在不行才切单词。但必须四者齐备：
-
min-width: 0（解除 Grid 子项最小宽度保护） -
overflow-wrap: break-word（现代标准写法） -
word-wrap: break-word（兼容 iOS 11 及更早 Safari） -
max-width: 100%或具体像素值（提供换行边界）
示例：
.grid-item {<br> min-width: 0;<br> overflow-wrap: break-word;<br> word-wrap: break-word;<br> max-width: 100%;<br>}
立即学习“前端免费学习笔记（深入）”；
移动端和嵌套场景下最容易被忽略的覆盖点
微信 X5 内核不支持 overflow-wrap: anywhere，别指望它替代 break-word；第三方组件（如 Card、Table）可能自带 min-width: fit-content 或内联样式，把你的 min-width: 0 覆盖掉。
- 用 DevTools 查看 computed 样式，确认
min-width真正生效的是0，而不是auto或fit-content - 如果内容包裹在
<span></span>或<a></a>里且未设display: block，行内元素不触发换行逻辑 - 表格单元格中使用时，必须配合
table-layout: fixed和显式列宽（如td { width: 200px; }）
该用 word-break 还是 overflow-wrap？
不是语法问题，是语义取舍：
- 展示日志 ID、token、base64 字符串 → 用
word-break: break-all，确保不撑破布局 - 显示用户可见链接、邮箱、API 路径 → 用
overflow-wrap: break-word，保留可读性 - 中英文混排正文（如评论区）→ 推荐
word-break: break-word（注意不是break-all），对中文按字断、英文保词义 -
word-break: break-word已废弃，现代项目中不要用
真正卡住的往往不是属性名写错，而是 min-width: 0 没落在正确的元素层级上，或者被外层组件样式悄悄重置了。
