min-content 是禁止换行时内容所需的最小宽度，非自动折行方案；grid 项默认 min-width: auto（等价于 min-content），导致 overflow-wrap: break-word 无法生效，需用 min-width: 0 等组合方案解决。
min-content 不是“让文字换行”，而是“不换行时的最小宽度”
看到 min-content 就以为它能帮文字自动折行，这是最常见的误解。实际上，min-content 是浏览器在「禁止换行」前提下，为内容算出的最小容器宽度：比如一个长 URL https://example.com/very-long-path-with-no-spaces，它的 min-content 就是整段字符串不折行时所需的宽度——这恰恰是导致溢出的根源，不是解法。
Grid 项默认 min-width: auto，而 auto 的计算逻辑就等价于 min-content。所以当你没显式干预时，浏览器会先按“不换行”算一遍宽度，再把 overflow-wrap: break-word 当作次要规则——结果就是：文字明明该断，却卡在“必须先满足 min-width”这一关。
-
min-content值受中文断字、URL 字符级折点、字体加载时机影响，同一段文本在不同渲染阶段可能算出不同值，造成布局跳动 - 设
grid-template-columns: min-content 1fr时，左侧列宽会被长单词锁死，右侧1fr被压缩，进一步挤压文本可用空间 - Safari 对
min-content在 inline 元素（如<span></span>）里的计算比 Chrome 更保守，容易低估宽度，导致意外换行或截断
为什么 overflow-wrap: break-word 在 Grid 里常失效
根本原因不是属性写错了，而是它被 min-width: auto 挡在了生效前。浏览器的处理顺序是：先确定尺寸（尊重 min-width），再考虑内容渲染（此时才轮到 overflow-wrap）。如果尺寸已经定死，换行规则就无从触发。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 只对 Grid 容器（如
.card）设overflow: hidden没用——必须作用在 grid item（如.card-description）上才能隐式重置min-width -
word-break: break-all会无视语义强行断字，适合技术字段（如哈希值），但对普通正文易读性差；overflow-wrap: anywhere更温和，只在必要时插入软换行，但部分旧版 Safari 不支持 - 若文本包裹在
<span></span>或<em></em>这类 inline 元素里，overflow-wrap默认不生效——得先加display: inline-block或改用块级标签
真正起效的三类实操方案
别依赖单一属性，组合使用才能稳定控制：
-
首选：
min-width: 0显式覆盖 —— 直接切断min-width: auto的默认行为，让overflow-wrap正常接管换行逻辑。适用于所有现代浏览器，包括 IE11 -
次选：
overflow: hidden隐式重置 —— 写在 grid item 上，一行代码生效，但会裁剪真实溢出内容（比如 tooltip 浮层可能被截） -
兜底：
max-width: min(90vw, 480px)+white-space: normal—— 避免父容器宽度失控，同时确保不会意外继承nowrap；注意min()函数需搭配@supports (max-width: min(0, 0))做兼容降级
容易被忽略的定位与包含块陷阱
Grid 项的尺寸锚定在「最近的非 static 祖先」上。如果父容器漏写了 position: relative，或者被嵌套在 display: flex 容器里且该容器没设 flex-shrink: 0，那么 min-content 计算就会漂移——你调了半天 min-width: 0，结果发现宽度还是被外层 Flex 压窄了。
调试时先用 outline: 1px solid red 套住 grid item，对比 computed width 和渲染实际宽度，能立刻看出是否被错误的包含块干扰。特别是滚动区域（如 overflow-y: auto 的侧边栏）里放 Grid，那个滚动容器很可能成了意外的定位上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
