必须同时满足四条件：min-width: 0（作用于grid-item自身）、overflow-wrap: break-word（优先）、max-width: 100%或显式宽度、white-space未被nowrap等覆盖，缺一不可。
直接加 word-break: break-all 基本没用，Grid 子项默认的 min-width: auto 会优先撑宽列，而不是换行。必须同时控制宽度约束、最小尺寸、断行策略和继承样式，四者缺一不可。
为什么 word-break: break-all 在 Grid 里经常不生效
它不是“坏了”，而是被 Grid 子项的隐式行为拦住了：浏览器给每个 grid-item 默认设了 min-width: auto（实际表现接近 min-content），遇到 https://verylongurlwithoutspaces 这类内容，宁可把整列拉宽，也不触发换行。
- 只写
word-break: break-all→ 浏览器先保宽度，再考虑断字，结果还是溢出 - 只在 Grid 容器上设
min-width: 0→ 错对象，必须作用于grid-item自身 - 内容包裹在
<span></span>或<a></a>里且未设display: block→ 行内元素不触发换行逻辑 - 父级或组件库样式带
white-space: nowrap→ 直接锁死所有换行行为
grid-item 必须加的四个条件
要让长单词真正折行，这四条必须同时满足：
-
min-width: 0：解除子项最小宽度保护（关键！不能漏） -
word-break: break-all或overflow-wrap: break-word：前者无差别切分，后者优先按标点/空格断 -
max-width: 100%或明确宽度（如width: 300px）：提供“溢出”的判断依据 - 确认未被
white-space: nowrap覆盖（检查 computed styles，尤其 Ant Design、Element Plus 等组件内部样式）
示例写法：
.grid-item {
min-width: 0;
overflow-wrap: break-word;
max-width: 100%;
}
该用 break-all 还是 overflow-wrap: break-word
绝大多数场景应选 overflow-wrap: break-word（旧名 word-wrap: break-word），它更安全：
-
overflow-wrap: break-word：先尝试在/、.、空格等自然断点换行；失败后才切长单词（如https://a.b/c会在/后换） -
word-break: break-all：强制在任意字符间断，可能把userEmail@example.com拆成userE+mail@exa+mple.com，语义全毁 - 两者共存时，
word-break: break-all会完全覆盖overflow-wrap行为，别双写 - 若需兼容 iOS 12 以下 Safari，可双写：
overflow-wrap: break-word; word-wrap: break-word;
嵌套布局中容易被忽略的层级问题
Grid 很少孤立存在，常嵌在 Flex 容器、position: absolute 块或第三方 Card 组件里——这些外层可能自带 min-width: fit-content 或内联样式，直接把你写的 min-width: 0 覆盖掉。
- 用浏览器 devtools 的 “Computed” 面板，逐层检查
min-width实际值是否真为0 - 若被覆盖，加
!important临时验证（上线前改用更高优先级选择器） - 对 Ant Design 的
Card或Table单元格，往往需要写成.ant-card .grid-item或td .grid-item才能生效 - 移动端微信 X5 内核不支持
overflow-wrap: anywhere，别指望它替代break-word
真正卡住的从来不是属性本身，而是你没看到那一层被悄悄覆盖的 min-width。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
