flex容器中长单词不换行，是因为子元素默认min-width: auto锁死收缩能力，需先设min-width: 0再配合overflow-wrap: break-word；后者仅在整词溢出时断行保可读性，而word-break: break-all任意断字破坏语义。
flex容器里长单词不换行，word-break 为什么没用？
因为 Flex 默认对子元素启用 min-width: auto，会强制阻止内容收缩——哪怕你写了 word-break: break-word 或 overflow-wrap: break-word，浏览器也优先保全长单词不截断，导致容器溢出或横向滚动。
关键不是加不加换行属性，而是先解除 Flex 的“最小尺寸锁”：
- 给 flex 项目（即含长文本的子元素）显式设置
min-width: 0 - 再配合
overflow-wrap: break-word（推荐）或word-break: break-word - 避免只用
white-space: normal，它对超长无空格字符串无效
为什么 overflow-wrap: break-word 比 word-break: break-all 更安全？
overflow-wrap: break-word 只在必要时（整词放不下当前行）才拆分单词，保留语义可读性；而 word-break: break-all 会在任意位置强行断开，比如把 https://example.com 拆成 https://exa…，影响复制和可访问性。
典型场景：卡片标题、API 响应 ID、邮箱地址等含长无空格字符串的展示：
div.card-title {
min-width: 0;
overflow-wrap: break-word;
/* 不要加 word-break: break-all，除非你明确接受任意位置截断 */
}
Flex 多列布局下，flex: 1 和换行冲突怎么办？
当子元素设了 flex: 1，它会尽可能拉伸，但拉伸后仍可能因 min-width: auto 拒绝收缩，导致换行失效。
解决方式很直接：
- 保持
flex: 1，但叠加min-width: 0 - 或者改用
flex: 1 1 0（即flex-grow: 1; flex-shrink: 1; flex-basis: 0），让基础尺寸为 0，释放收缩能力 - 若父容器是
flex-direction: column，则需关注max-height+overflow组合，而非宽度换行
移动端 Safari 对 overflow-wrap 的兼容性陷阱
iOS 15.4 之前版本不支持 overflow-wrap: anywhere，且部分旧版 Safari 对 overflow-wrap: break-word 在 flex 子项中响应滞后——尤其搭配 text-overflow: ellipsis 时。
稳妥写法（带降级）：
p.description {
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word; /* 旧语法，兼容 iOS <p>真正容易被忽略的是：iOS 上如果父容器有 <code>transform</code>（如 <code>translateZ(0)</code>）或 <code>will-change</code>，可能意外禁用换行渲染——遇到时先临时移除这些属性验证。</p>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
