grid 中 overflow-wrap 失效的根本原因是 grid item 默认 min-width: auto 锁定收缩，需显式设 min-width: 0 才能触发换行；搭配 minmax(0, 1fr) 和正确作用域（.grid > .item）方可彻底解决。
长文本撑破 Grid 网格，不是 overflow-wrap 失效，而是 grid item 默认的 min-width: auto 锁死了收缩能力——必须显式覆盖它，否则任何换行或截断样式都只是摆设。
为什么 overflow-wrap: break-word 在 Grid 里不生效
浏览器在计算 grid item 尺寸时，优先尊重其 min-width: auto（即内容最小固有宽度），哪怕你写了 overflow-wrap: break-word，它也不会触发换行，因为“还没到需要换行那步”：容器先被拉宽到能塞下整段文本为止。
- 典型现象：两列
1fr布局变成一宽一窄；开发者工具里Computed面板显示min-width: auto，而非你期望的数值 - 检查路径：右键元素 → “检查” → 切到
Computed标签页 → 搜索min-width，确认是否仍是auto - 快速验证：临时加
min-width: 0和border: 1px solid red，看列宽是否立刻回归等分
必须在 grid 直接子元素上设 min-width: 0
这个样式必须作用于 .grid > .item 这一层，不能只写 .item（避免污染非 Grid 上下文），也不能加在父容器上。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 正确写法：
.grid > .card-description { min-width: 0; overflow-wrap: break-word; } - 如果子项内部还嵌了
display: flex容器，它自己也得加min-width: 0，否则撑开会逐层传导 - 搭配
max-width: 100%更稳妥，尤其当父容器宽度不确定时
用 minmax(0, 1fr) 替代纯 1fr 更可靠
1fr 实际等价于 minmax(min-content, 1fr)，而 min-content 对长 URL 或连续字母串来说可能极大；minmax(0, 1fr) 从轨道定义层就切断撑开源头。
- 三列等分应写：
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - 配合
auto-fit时更关键：repeat(auto-fit, minmax(0, 1fr))才能真正响应窄屏 - Safari ≤14.1 有兼容问题，可降级为
minmax(min-content, 1fr)+ 子项min-width: 0+width: 100%
处理不同文本类型要选对换行策略
overflow-wrap: break-word 和 word-break: break-all 不是互斥关系，而是分工明确：
-
overflow-wrap: break-word：适合用户可见内容，如长链接、邮箱、带连字符的术语，不会在点号或斜杠前硬切 -
word-break: break-all：专治 base64、哈希、API 路径这类“无语义字符串”，但会把中文切成单字，务必限定作用范围（如只加在.token-value类上） - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代break-all
真正难的不是加哪一行 CSS，而是在嵌套布局里判断“该在哪一层加 min-width: 0”——Grid 容器？某条 grid-template-rows？还是某个 grid-area 的直接子元素？漏掉一层，溢出就还在那儿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
