加了 overflow-wrap: break-word 仍撑破卡片，是因为 grid/flex 子项默认 min-width: auto 锁定最小宽度，导致换行逻辑无法触发；必须在文本容器（卡片直接子元素）上显式设置 min-width: 0，并配合 width/max-width 才生效。
为什么加了 overflow-wrap: break-word 还是撑破卡片？
不是属性没生效，而是它根本没触发机会。Grid 或 Flex 卡片容器里，文本所在元素（比如 .card-content）作为直接子项，默认带 min-width: auto——浏览器会优先按“整段长英文的最小宽度”来撑开它，哪怕你写了 overflow-wrap: break-word，也卡在尺寸计算阶段就停住了。
- 必须在文本容器（即卡片的直接子元素）上显式设
min-width: 0，这是前提，不是可选项 - 如果该元素还套了一层
<div>，<code>min-width: 0就失效了——得加在最内层文本块上 - 旧版 Safari（≤15.6）不认
flex: 1隐含的min-width: 0，所以别省略这行 - 用开发者工具检查 computed 值，确认
min-width真是0px，别靠肉眼判断 - 生产环境优先用
overflow-wrap: break-word：适合 URL、API 路径、日志 ID，语义安全 -
overflow-wrap: anywhere适合固定列宽表格、卡片标题含长哈希值等场景，但老项目要双写：overflow-wrap: break-word; overflow-wrap: anywhere; -
word-break: break-all不推荐用于卡片正文——它会在任意字符间硬断，比如把user_id_123456789切成user_id_123和456789，影响可读性 -
word-break: break-word已废弃，现代浏览器不保证支持，别从老项目复制 - 父容器（如
.card-grid或.card-list）必须有width或max-width，比如max-width: 100%，否则子项会撑满视口 - Grid 卡片里，确保
.card设了width: 100%，否则内容可能撑破网格项 - Flex 卡片里，检查子项是否误设了
flex-shrink: 0——它会让min-width: 0失效，得先删掉 - 移动端要双写兼容：
word-wrap: break-word（iOS 11 及更早） +overflow-wrap: break-word（现代标准） -
<input type="text">无法自动换行，只能靠width+overflow: hidden截断，或换成<textarea></textarea> -
<textarea></textarea>默认支持换行，但需加resize: none防拖大，并用width/max-width约束 -
<pre class="brush:php;toolbar:false;"></pre>和<code>默认white-space: pre，必须重置为white-space: pre-wrap或normal才能配合overflow-wrap - 中英混排时，单用
overflow-wrap: break-word可能无效，补上word-break: keep-all（iOS 12 以下加-webkit-word-break: keep-all）
overflow-wrap: break-word 和 overflow-wrap: anywhere 怎么选？
两者效果看似一样，但底层逻辑差很多：break-word 是“兜底换行”，只在整词放不下时才切；anywhere 更激进，会把最小内容宽度压到单个字符宽，更容易挤进弹性列中。
卡片用了 Grid/Flex，但文本还是不换行？检查这三处
换行不是“自动发生”，而是“超出可用空间后被迫发生”。哪怕 min-width: 0 和 overflow-wrap 都写了，也可能因父容器没约束宽度而失效。
<pre class="brush:php;toolbar:false;"></pre>、<code>、<input> 这些元素怎么处理？
overflow-wrap 和 word-break 对它们基本无效，因为这些元素有自己的渲染规则。
min-width: 0 的作用范围和生效条件——它只对直接子元素起效，且必须和宽度限制、收缩行为协同，缺一不可。
