word-break: break-all 仅在块级元素且父容器有明确宽度（如 width 或 max-width）时生效；Flex、Grid 中未约束尺寸或 inline-block 无宽时失效，表格单元格需 table-layout: fixed，white-space: nowrap 会禁用它。
word-break: break-all 什么时候能生效
它只在块级元素、且父容器有明确宽度限制时才起作用。比如 max-width: 300px 或 width: 200px；如果父容器是 display: inline-block 且没设宽，或处于 flex / grid 布局中却没约束尺寸，word-break: break-all 就会被忽略。
常见失效场景：
- Flex 子项默认带
min-width: auto，会顶住压缩 —— 解决办法是加min-width: 0或overflow: hidden - 表格单元格（
<td>）里不生效 —— 需要给<table>加table-layout: fixed - 写了
white-space: nowrap（比如用了 Tailwind 的whitespace-nowrap）—— 它会直接压制所有换行逻辑
为什么不能用 word-break: break-word
这个值早已被移除，现代浏览器会直接忽略它，等价于 word-break: normal —— 也就是完全不换行。很多老项目还留着这行 CSS，结果就是“明明写了却没效果”。
真正该用的是：
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word（标准写法） - 兼容旧版 Safari（≤14）可补一句
word-break: break-word，但仅作 fallback，不是主力
word-break: break-all 和 overflow-wrap: break-word 怎么搭配
单独用 word-break: break-all 太粗暴，会把 username 切成 usern + ame；单独用 overflow-wrap: break-word 又可能对超长 base64 或哈希串（如 sha256:8a3b4cf9e0...）不触发断行 —— 因为它优先保“单词完整性”。
稳妥组合是：
-
overflow-wrap: break-word：日常文本、URL、文件名等语义化兜底 -
word-break: break-all：作为 fallback，确保技术字段绝对不溢出 - 显式加
word-break: normal防止继承污染
示例：
.log-token {
max-width: 240px;
overflow-wrap: break-word;
word-break: break-all;
word-break: normal;
}
中英文混排时 word-break: keep-all 是关键
中文本身按字换行，但一旦夹了英文长串（如“测试test123456789”），浏览器默认会把中文当整体、英文当“一个词”，结果英文部分撑破容器。这时单靠 overflow-wrap 不够，必须加 word-break: keep-all 锁住中文不被意外劈开，再让英文按 overflow-wrap 规则处理。
注意：
-
keep-all对纯英文无效，所以得和overflow-wrap: break-word配合 - iOS 12 及更早版本对
keep-all支持弱，可加-webkit-word-break: keep-all - 别全局设置
word-break: keep-all，只加在明确含中英混排的 class 上
<pre> 里放 JSON）、WebView 兼容性、以及是否真需要保留语义 —— 这些没法靠一行 CSS 解决，得结合 JS 插零宽空格或服务端预处理。 
