写了word-break: break-all仍撑破容器，根本原因是未满足三个前提：容器缺宽度约束、flex子项未设min-width: 0、或被white-space: nowrap覆盖。
写了 word-break: break-all 还是撑破容器？大概率不是属性写错了，而是三个前提没满足：容器没宽度约束、Flex 子项没设 min-width: 0、或被 white-space: nowrap 锁死了。
为什么 word-break: break-all 单独写经常无效
它不是“打开换行开关”，而是告诉浏览器：“当必须断的时候，允许在任意字符间断”。但浏览器得先确认“必须断”——这依赖于容器有明确宽度边界。如果父容器是 display: flex 且没设 max-width 或弹性收缩限制，它会优先无限拉宽自己来塞下整个字符串，根本不会触发断行逻辑。
- 检查目标元素的父容器是否为
flex或grid—— 是的话，min-width: auto默认生效，必须显式覆盖 - 用 DevTools 的 Computed 面板搜
min-width，确认值是0px，别信肉眼判断 - 确认没继承
white-space: nowrap（常见于按钮、表格单元格、Ant Design / Element Plus 的默认样式）
word-break: break-all 和 overflow-wrap: break-word 怎么配
这不是二选一，而是主次搭配：overflow-wrap: break-word 处理语义化断行（比如长链接、邮箱），word-break: break-all 是兜底暴力方案，专治 base64、哈希串、API 路径这类“根本不该算单词”的字符串。
- 日常内容用：
overflow-wrap: break-word; word-wrap: break-word;（兼容 iOS 11 及更早） - 明确含长英文/无空格串的容器（如
.token-value、.log-id）加：word-break: break-all; - 别用
word-break: break-word—— 已废弃，现代浏览器不识别 - 中英文混排时，
break-all会把中文“数据库”切成“数”+“据”+“库”，所以只加在纯英文上下文里
Flex 容器里子项必须加 min-width: 0
这是最常漏掉也最致命的一环。Flex 子项默认 min-width: auto，意思是“至少容下最长那个单词”，它宁可把整张卡片拉宽也不换行。这个行为符合规范，不是 bug。
- 必须加在 Flex 容器的直接子元素上（比如卡片里的
<p class="content"></p>），嵌套一层就失效 - 如果该子项还写了
flex-shrink: 0，min-width: 0会被忽略 —— 得先删掉flex-shrink: 0 - 旧版 Safari（≤15.6）对
flex: 1隐含的min-width: 0支持不稳定，一律显式写min-width: 0 - 表格里要生效，还得配
table-layout: fixed+ 显式列宽（如td { width: 200px; }）
<pre class="brush:php;toolbar:false;"></pre>、<code>、<input> 这些元素怎么办
它们有独立渲染逻辑，overflow-wrap 和 word-break 基本无效。遇到长文本溢出，得换思路：
-
<pre class="brush:php;toolbar:false;"></pre>和<code>：用white-space: pre-wrap替代pre，再配overflow-wrap: break-word -
<input>：无法靠 CSS 断行，只能控制size属性或用textarea替代 - 移动端 X5 内核（微信）不支持
overflow-wrap: anywhere，别指望用它替代break-all
真正卡住人的，往往不是属性名记不住，而是忘了 Flex 子项那层默认的 min-width: auto —— 它像一层透明胶带，你贴再多断行规则，它都死死绷着不松手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
