overflow-wrap: break-word 在 contenteditable 编辑器中常失效，因受 display:inline、white-space:pre-wrap 和 flex 容器无 min-width:0 三重压制；需同时设置 width/max-width、display:block、overflow-wrap:break-word 和 white-space:normal 才生效。
overflow-wrap: break-word 为什么在编辑器里常失效
直接给 <div contenteditable="true"> 或富文本容器加 overflow-wrap: break-word 几乎总不生效——不是属性写错，而是编辑器环境自带三重压制：内容可编辑元素默认是 display: inline 或 inline-block，white-space: pre-wrap（保留换行但禁用自动断词），以及父级 flex 容器没设 min-width: 0。
-
contenteditable元素的 computeddisplay常为inline，而overflow-wrap对 inline 元素支持极弱，必须显式设为display: block或inline-block - 富文本编辑器（如 Slate、Quill、Draft.js）默认用
white-space: pre-wrap保留言行结构，但它会阻止overflow-wrap触发内部断词 - 如果编辑器外层是
display: flex（比如工具栏+编辑区布局），编辑区本身没加min-width: 0，flex item 就会锁死宽度，overflow-wrap彻底被忽略
编辑器内生效的最小 CSS 组合
别只写一行样式。以下四条缺一不可，且顺序无关：
-
width或max-width必须显式设置（哪怕max-width: 100%，前提是父容器有宽度） -
display: block（或inline-block；contenteditable元素不能依赖默认 display） -
overflow-wrap: break-word（现代写法，IE11 可加word-wrap: break-word兜底） -
white-space: normal（覆盖编辑器默认的pre-wrap；若需保留用户手动换行，改用white-space: pre-line）
示例（适用于大多数基于 div[contenteditable] 的轻量编辑器）：
<div class="editor" contenteditable="true"></div>
.editor {
width: 100%;
max-width: 600px;
display: block;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: normal;
}
Flex 布局下必须加 min-width: 0
这是线上最多见的“写了没反应”原因。编辑器容器若嵌套在 display: flex 父级中（例如左侧菜单 + 右侧编辑区），子元素不加 min-width: 0，浏览器就会按内容撑开宽度，overflow-wrap 根本没机会触发。
立即学习“前端免费学习笔记（深入）”；
- 加在编辑器自身上，不是父容器：
.editor { min-width: 0; } - 不要用
overflow: hidden替代——它只是裁剪，不解决换行逻辑 - 若编辑器用了
display: grid，同理需加min-width: 0
中英文混排与 URL 的实际表现差异
overflow-wrap: break-word 对中文段落里夹的英文长串（如 test123456789）可能不触发断词——因为中文本身按字换行，浏览器认为“已有断点”，就不走兜底逻辑。URL 则不同，它优先在 /、.、- 处断，而非字母中间。
- 要让纯英文长串也断，可加
word-break: break-word（注意：不是break-all，这是规范新增值，语义安全） - 对含中文的编辑器内容，慎用
word-break: keep-all——它会禁止中文断行，反而导致整行溢出 - 移动端 iOS Safari 需额外加
-webkit-hyphens: auto（仅对英文有效，且需lang="en"）
真正卡住的从来不是属性名，而是它和 contenteditable、flex、white-space 这几样东西的隐式冲突。调的时候别只盯着 computed styles 里的 overflow-wrap 是否存在，重点查它上面有没有被 white-space: nowrap 覆盖，或者父级是不是 flex 但子项没松开 min-width。
