ie8–9中word-break: break-all不生效，因仅支持word-wrap；须双写word-wrap: break-word与word-break: break-all，且容器需设width/max-width。

IE8–9 中 word-break: break-all 完全不生效

根本原因是这些版本没真正实现 word-break，只认 word-wrap。直接写 word-break: break-all 在 IE8–9 里等于没写。

实操建议：

Feihong Word Docx

创建、检查和编辑 Microsoft Word 文档和 DOCX 文件，支持样式、编号、修订追踪、表格、分节及兼容性检查

下载

• 必须双写：word-wrap: break-word; + word-break: break-all;，IE8–9 用前者，现代浏览器用后者
• 不能只依赖 word-break，尤其当内容含长英文 URL 或 Base64 时，word-wrap: break-word 是唯一能兜底的属性
• 若已用 display: inline，得先改成 inline-block 或 block，否则 word-wrap 在 IE 下也不触发

Safari 13–14 中 word-break: keep-all 失效

旧版 Safari 把中文字符当作“可断单元”，word-break: keep-all 被忽略，“你好世界”可能被拆成两行。这不是不支持，是断点判定逻辑不同。

实操建议：

• 必须搭配 overflow-wrap: normal;，否则 overflow-wrap: break-word 会覆盖 keep-all 的约束
• 对 iOS Safari 13–14，加一句 -webkit-text-stroke: 0.1px transparent; 可激活更严格的字形边界识别
• 如果内容来自用户输入且含换行符，还得补 white-space: pre-line;，否则回车符被吞掉，keep-all 就没意义

Flex 子项上 word-break 失效却查不到原因

写了 word-break: break-all 和 overflow-wrap: break-word 还是撑破容器？大概率是 Flex 子项卡在 min-width: auto 上——它不会自动收缩，DevTools 里还看不到这个值。

实操建议：

• 必须在 Flex 直接子元素上显式写 min-width: 0;，父容器或孙子节点上写没用
• 如果子项同时设了 flex-shrink: 0，得先删掉，否则 min-width: 0 被无视
• 旧版 Safari（≤15.6）对 flex: 1 隐含的 min-width: 0 支持不稳定，一律显式声明

Chrome 正常、Safari 却完全不换行

常见于同时写了 word-break: break-all 和 overflow-wrap: break-word。Safari（WebKit）中后者优先级更高，只要它判断“能靠空格换行”，就跳过 break-all 的强制逻辑。

实操建议：

• 别混用这两个属性来“保险”，它们不是并列关系，而是存在覆盖逻辑
• 明确场景：纯技术字段（如 /v1/tokens/abc123）用 word-break: break-all；普通正文或含 URL 的段落，只用 overflow-wrap: break-word
• 窄屏下 overflow-wrap: anywhere 更可靠，但需确认目标环境是否支持（Safari 16.4+、Chrome 107+）

真正容易被忽略的是：所有这些属性都依赖容器有明确的 width 或 max-width。没有它，浏览器认为“还有空间”，根本不会触发任何断行逻辑——这点在响应式嵌套、Flex/Grid 深层子项里最容易漏。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！