优先用 overflow-wrap: break-word，同时双写 word-wrap: break-word 以兼容旧浏览器；word-break: break-all 会无差别切分字符，破坏语义与可读性，仅适用于哈希、UUID等纯技术字符串。
直接说结论：用 overflow-wrap: break-word，同时加一行 word-wrap: break-word 兼容旧浏览器；别只靠 word-break: break-all，它会无差别切单词，中文里还可能切开单字，语义和可读性都受损。
overflow-wrap 与 word-wrap 到底该用哪个？
现代标准是 overflow-wrap，word-wrap 是它的旧名，W3C 在 CSS Text Level 3 中已正式替换。但 IE6–8 只认 word-wrap，所以实际项目中建议双写：
div.long-text {
width: 200px;
overflow-wrap: break-word;
word-wrap: break-word;
}
这样既符合规范，又不丢兼容性。单独写 word-wrap 虽然能跑，但属于技术债——新团队接手时容易误以为是过时写法。
break-word 和 break-all 的行为差异很关键
overflow-wrap: break-word 是“必要时才断”：先尝试保持整个单词完整，只有当单词长度超过容器宽度、且周围又没空格可换行时，才在单词内部插入断点。
word-break: break-all 是“随时可断”：不管上下文，只要到容器边界就硬切，哪怕切在 “https” 中间变成 “http\ns”。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 长 URL 或英文术语（如
Supercalifragilistic）优先用overflow-wrap: break-word - 表格中固定列宽的纯数据字段（比如日志 ID、哈希值），可考虑
word-break: break-all - 中文段落一般不需要
word-break，因为中文天然按字换行；但若用了word-break: keep-all，反而会导致整段溢出
white-space 会影响 overflow-wrap 是否生效
overflow-wrap 不是万能开关。如果父元素设置了 white-space: nowrap 或 white-space: pre，它就完全失效——因为浏览器根本不会尝试换行，自然也谈不上“要不要在单词里断”。
常见踩坑场景：
- 用
<pre class="brush:php;toolbar:false;"></pre>包裹代码片段，又想让超长行自动折行 → 得额外加white-space: pre-wrap - 组件库默认设了
white-space: nowrap做截断（比如某些 Tooltip 样式）→ 覆盖掉overflow-wrap - Flex 容器子项未设
min-width: 0→ 单词被 flex 主轴强行撑开，overflow-wrap失效
PHP 的 wordwrap() 函数和 CSS 的 word-wrap 完全无关
这是两个同名不同源的东西，容易混淆：
- CSS 的
word-wrap是样式规则，控制浏览器渲染时如何折行 - PHP 的
wordwrap()是服务端函数，对字符串提前插入换行符（如"\n"），返回的是带换行符的新字符串 - 如果你在 HTML 中输出 PHP 处理后的文本，记得把
\n转成<br>或配合white-space: pre-wrap，否则换行符会被忽略
最易忽略的一点：CSS 的 overflow-wrap 对 `
