Grid子项需显式设min-width:0才能触发overflow-wrap换行，因默认min-width:auto会锁定容器宽度；overflow:hidden可间接生效但会裁剪内容；break-words等断行类需配合宽度约束和块级显示才有效。
因为 Grid 项默认 min-width: auto，它会把整个长单词（比如 https://example.com/api/v1/users/1234567890）当作不可分割的最小宽度来锁定容器尺寸，overflow-wrap: break-word 根本没机会触发。
Grid 子元素必须显式设 min-width: 0
这是最直接、副作用最小的解法。Grid 规范规定，每个直接子项（如 .card-description）默认 min-width: auto，计算值等于内容的固有最小宽度（intrinsic minimum width）。浏览器优先满足这个约束，导致换行逻辑被跳过。
- 必须加在文本所在的 grid item 上，不是 grid 容器（如
.card） - 该元素必须是 grid 容器的 direct child；如果中间嵌套了
<div>，就得加在那一层 <li>搭配 <code>overflow-wrap: break-word才能生效，单独写没用 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，一律显式写 - 代码更少，适合纯展示场景（如卡片描述、日志列表）
- 但它会裁剪所有溢出内容，无法配合
text-overflow: ellipsis或 tooltip 使用 - 如果该元素将来要加滚动条、动画或 transition，
overflow: hidden可能导致渲染异常 - 注意：必须设在文本元素上，不是它的父容器
- 它不能绕过
min-width: auto—— 如果没先解决这个，照样不换行 - 适合技术 ID、哈希、无空格 base64 字符串等场景
- Chrome 76+、Firefox 69+、Safari 15.4+ 支持；IE 完全不支持
- 对普通英文段落可能造成语义断裂（如
international拆成inter-nation-al），视觉不自然 - 必须配
max-w-full、max-w-md等宽度控制类，否则break-words不触发 - Flex/Grid 子项必须加
min-w-0，否则break-words被min-width: auto锁死 - 元素要是块级上下文：
block、inline-block，不能是纯span - 检查祖先是否用了
whitespace-nowrap—— 它会直接压制所有换行逻辑
overflow: hidden 是快捷替代，但有隐含代价
给文本元素自身设 overflow: hidden，CSS Grid 会隐式将它的 min-width 和 min-height 都重置为 0，从而间接启用换行。
overflow-wrap: anywhere 更激进，但不能代替 min-width: 0
overflow-wrap: anywhere 允许在任意字符之间断行（包括英文单词中间），比 break-word 更容易“挤”进窄容器，但它依然受制于尺寸约束。
立即学习“前端免费学习笔记（深入）”；
Tailwind 用户别漏掉 min-w-0 和宽度约束
Tailwind 的 break-words 不是万能开关，它只在「已有边界且内容实际溢出」时才介入。很多情况下它静默失效，不是类名写错，而是前提缺失。
最容易被忽略的是：换行从来不是单一样式能决定的事。它依赖宽度约束、显示模式、布局上下文和断行策略四者协同。哪怕你写对了 overflow-wrap: break-word，只要父容器是 Grid 且子项没设 min-width: 0，或者文本包在 white-space: nowrap 里，它就等于没写。
