必须给网格子项加 min-width: 0，再配 overflow-wrap: break-word 和 white-space: normal，三者缺一不可；因子项默认 min-width: auto 会撑开列宽，不触发换行，且 overflow-wrap 是兜底策略而非主动换行开关。
必须给网格子项加 min-width: 0，再配 overflow-wrap: break-word 和 white-space: normal，三者缺一不可。
为什么只写 overflow-wrap: break-word 没用？
这个属性不是“开启换行”的开关，而是兜底策略：只有当单词整体放不下当前行宽时，才考虑折行。但 Grid 子项默认有 min-width: auto，浏览器会优先撑开列宽来容纳整个单词，根本不会触发折行逻辑。
- 父容器是
display: grid，子项天然受min-width: auto锁定，不手动覆盖就永远不收缩 -
white-space: nowrap（常见于按钮、表格单元格、UI 框架组件）会直接压制所有换行行为 - 没设
max-width或宽度约束，容器无限宽，浏览器没换行动机 - 在
<pre class="brush:php;toolbar:false;"></pre>里或元素是inline级（如<span></span>）且未声明display: block，也无效
min-width: 0 必须加在子项上，不是网格容器
很多人误以为在网格容器（.grid）上设 min-width: 0 就够了，其实完全无效。Grid 布局中，真正被撑开的是网格项（即直接子元素），所以约束必须落在它身上。
- 对每个可能含长文本的网格项，显式加
min-width: 0（现代写法也可用min-inline-size: 0） - 若子项是
<img>、<button></button>或其他内联元素，还需加display: block或display: inline-block - 配合
overflow: hidden也能间接重置min-width，但语义不如min-width: 0明确
移动端和 Safari 兼容要双写 word-wrap 和 overflow-wrap
iOS Safari 在 15.4 之前对 overflow-wrap 支持不稳定，旧版本常静默回退到 normal。光写一个属性，小屏下照样撑破列宽。
- 稳妥写法必须同时声明：
word-wrap: break-word和overflow-wrap: break-word - 别写
word-break: break-word——这是非标准写法，Chrome 曾短暂支持，现已废弃 - 对纯技术字符串（如哈希值、base64、日志 ID），可降级用
word-break: break-all，但慎用于用户可见正文 - Android WebView 表现碎片化，建议统一用
white-space: normal; overflow-wrap: break-word; word-break: normal;组合
最容易被忽略的点是：字体加载完成前后字宽变化会导致布局二次撑开——哪怕 CSS 全部写对了，WebFont 加载后仍可能把原本能塞下的 URL 推出列外。这时候得靠 font-display: swap + max-width: 100% + box-sizing: border-box 三件套稳住容器边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
