优先用overflow-wrap: break-word，它先按空格、斜杠等自然断点换行，放不下才切单词；word-break: break-all无差别硬切，仅适用于日志id等纯数据场景，且需配合min-width: 0才能在flex/grid中生效。
word-break: break-all 在长英文中会破坏语义
它不区分单词边界，直接按容器宽度硬切，比如 userProfileSettings 可能变成 userProfi leSettings，阅读和复制都出问题。这不是“换行”，是“劈开”。只适合纯数据场景，比如日志 ID、Base64 字符串这类没人读、只校验的字段。
常见错误现象：word-break: break-all 写了但没生效 → 检查父容器是不是 display: flex 或 display: grid，子项默认带 min-width: auto，会锁死压缩；修复方法是给子元素加 min-width: 0 或 overflow: hidden。
- 别在卡片、列表项、API 响应展示等需可读性的地方用
break-all - 表格单元格（
td）里慎用，Safari 旧版支持不稳定 - 中英混排时，
break-all会让中文也被切开，实际并不需要
overflow-wrap: break-word 是 URL 和长英文的首选
它先尝试靠空格、斜杠、点号等自然断点换行（比如 https://example.com/api/v2/users 会在 / 处断），实在放不下才进单词内部切。对 MyLongVariableName 这类驼峰名也更友好——至少保留前缀完整。
关键前提：必须配合有宽度限制的容器，比如 max-width: 300px 或 width: 200px，否则浏览器没换行动机。
将 LaTeX（.tex）学术论文转换为 Word（.docx），支持可编辑的 OMML 公式、原生 Word 表格、嵌入图形、IEEE 双栏排版及参考文献
- 推荐写法：
overflow-wrap: break-word（现代标准），再加一行word-wrap: break-word兼容旧版 Safari/IE - 遇到中英混排溢出（如“测试test123456789”），单靠
overflow-wrap不够，得补word-break: keep-all防中文被切 -
white-space: pre-wrap要额外加，否则代码片段里的缩进和换行会被抹平
中英混排场景下 keep-all 很容易被忽略
中文本身无空格，浏览器默认就在字之间换行；但一旦夹着英文长串，英文部分就卡住不换。这时候 overflow-wrap: break-word 可能完全不触发——因为浏览器认为“中文段落整体没超宽”，英文只是嵌在里面的一坨。
解决办法是显式告诉浏览器：“中文别动，英文按需断”。word-break: keep-all 就是干这个的，但它在 Safari 旧版支持弱，建议加 -webkit-word-break: keep-all 兜底。
- 不要只依赖
overflow-wrap应对混合文本 - 如果容器内还有
<code>或<pre class="brush:php;toolbar:false;"></pre>，记得单独处理它们的white-space -
overflow-wrap: anywhere看似一样，但会影响min-content宽度计算，仅在需要极致压缩时才考虑
flex/grid 容器里 word-break 失效是高频坑
很多人把 word-break: break-all 或 overflow-wrap: break-word 往 div 上一贴就以为完事，结果在 display: flex 的父容器里完全不换行。根本原因是 flex item 默认有 min-width: auto，浏览器宁可撑宽容器也不压缩内容。
真正起作用的是松开这个限制：min-width: 0 或 overflow: hidden（后者更常用，副作用小）。
- 别在 flex item 上只写
word-break，漏掉min-width: 0就等于没写 - grid item 同理，
min-width: 0是必选项 - 如果用了
text-overflow: ellipsis，要确保同时设white-space: nowrap，否则 ellipsis 不生效
code {
overflow-wrap: break-word;
word-break: keep-all;
min-width: 0;
}
复杂点在于你得判断清楚：这段文本是给人读的，还是机器校验的；容器是普通块级，还是 flex/grid；里面有没有中文、代码、URL 混着来——这些细节一错，word-break 就从工具变成 bug 来源。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
