根本原因是grid/flex子项默认min-width: auto锁死最小宽度，导致overflow-wrap: break-word失效；必须显式设min-width: 0或overflow: hidden作用于直系子元素，再配合overflow-wrap: break-word等属性才能生效。
根本原因不是样式没写对，而是浏览器在 Grid 或 Flex 布局下默认锁死了文本容器的最小宽度——min-width: auto 会强制它撑开，让 overflow-wrap: break-word 完全失效。
Grid/Flex 子项的 min-width: auto 是罪魁祸首
当你把一个 <p class="card-description"></p> 放进 display: grid 或 display: flex 的父容器里，它自动成为 grid item / flex item。这类元素默认有 min-width: auto，计算值等于内容的「固有最小宽度」——比如一串无空格的 URL https://example.com/very-long-path-with-no-spaces，整段就是一个不可折行单元，浏览器宁可撑宽容器也不换行。
- 这不是 bug，是 CSS 规范行为
-
overflow-wrap: break-word只在「有收缩空间」时才生效，而min-width: auto把这个空间锁死了 - 即使你写了
width: 100%或max-width: 200px，只要min-width: auto比它大，就无效
min-width: 0 是最直接的解法
显式覆盖掉那个隐式的 min-width: auto，告诉浏览器：“这个元素可以缩到 0 宽度，别硬撑”。之后 overflow-wrap 才能真正起作用。
- 必须加在文本元素自身上（比如
.card-description），不是父容器 - 确保它是 grid/flex 容器的直接子元素；如果中间套了
<div>，得加在那层上 <li>兼容性极好，IE11+ 和所有现代浏览器都支持</li> <li>示例：<pre class="brush:php;toolbar:false;">.card-description { min-width: 0; overflow-wrap: break-word; padding: 0.5rem; }</pre> </li> <h3> <code>overflow: hidden是快捷替代方案给文本元素加
overflow: hidden也能触发浏览器隐式重置min-width为0，效果等同于手动写min-width: 0，还顺带裁掉溢出部分。- 注意：这是作用在文本元素上，不是父容器
.card - 副作用是无法滚动查看溢出内容，也不适合配合
text-overflow: ellipsis（因为 ellipsis 要求overflow: hidden+white-space: nowrap，二者逻辑冲突） - 如果你只需要“不撑开、不溢出、正常换行”，它比写两行 CSS 更省事
- 示例：
.card-description { overflow: hidden; overflow-wrap: break-word; padding: 0.5rem; }
overflow-wrap: anywhere比break-word更激进当
break-word还是换不下去（比如全是数字 ID 或连续字母），可以试试overflow-wrap: anywhere——它允许在任意两个字符之间断行，哪怕中间没有连字符或空格。- 对英文单词破坏性略大（可能把 “hello” 断成 “he” + “llo”），但对 URL、哈希、token 类字符串更可靠
- 需要搭配
min-width: 0或overflow: hidden才能生效，单独用没用 - 浏览器支持已很广（Chrome 68+、Firefox 66+、Safari 15.4+），但旧版 Safari 可能忽略
- 不要和
white-space: nowrap同时用，后者会直接禁用所有换行
最容易被忽略的点：你以为问题出在
overflow-wrap，其实卡在布局模型底层的尺寸约束上；不先解决min-width: auto，任何换行属性都是摆设。 - 注意：这是作用在文本元素上，不是父容器
