慎用 word-break: break-all，它会在任意字母间断行破坏语义；中英文混排应使用 overflow-wrap: break-word + word-break: normal，配合 width/max-width 和 white-space: normal；table 中需注意 white-space 默认 nowrap 及 table-layout 影响。
word-break: break-all 会把英文单词切成碎片，慎用
它真正在任意两个字母之间断行，比如 fetchData 可能变成 fe- 换行 + tchD- 换行 + ata，完全破坏语义。只适合纯展示、对可读性无要求的场景，例如日志 ID 列表或调试面板。
常见误用：给中英混排容器直接加 word-break: break-all，结果中文正常，英文全被乱切——因为 break-all 对非 CJK 文本也生效，且不区分是否“必要”。
- 它不管容器有没有宽度限制，只要文本超长就强行断
- 和
white-space: nowrap冲突：后者会让break-all完全失效 - 在
flex或grid子项里，若没设min-width: 0，它可能压根不触发
中英文混排该用 overflow-wrap: break-word + word-break: normal
word-break: break-word 已废弃，Chrome 89+ 忽略，Safari 兼容差；必须改用 overflow-wrap: break-word。
这个组合才是现代写法：overflow-wrap: break-word 负责“要不要断”（仅当整词放不下时才断），word-break: normal 负责“在哪能断”（对英文保持空格/连字符优先，对中文允许字间断）。
- 长 URL 如
https://example.com/very/long/path会在斜杠处自然换行，而不是在/v或er中间硬切 - 中文自动按字断，英文尽量保词完整，两者互不干扰
- 必须配
width或max-width，否则overflow-wrap找不到“边界”，不会启动
表格单元格文字不换行？先查 white-space 和 table-layout
<td> 默认有 <code>white-space: nowrap，这是最常被忽略的根源。哪怕你写了 overflow-wrap: break-word，它也起不来作用。
典型修复顺序：
生产级WordPress REST API集成，用于管理文章、页面、媒体、WooCommerce产品、Elementor内容、SEO元数据、ACF及JetEngine字段
- 给
td加white-space: normal - 加
overflow-wrap: break-word（别用word-break: break-word） - 如果父表用了
table-layout: fixed，必须给该td显式设width或min-width，否则样式被锁死 - Flex/Grid 布局下的
td还要加min-width: 0，否则 flex item 的默认min-width: auto会阻止收缩
keep-all 不是“防断行开关”，它只约束非CJK文本
word-break: keep-all 的真实行为是：CJK 文本（中/日/韩）禁止在字间断，非 CJK 文本退回到 normal 规则——也就是说，英文仍会在空格处断，但长英文单词（如哈希值、路径）依然会溢出。
所以它常被误认为“能让中文不断行”，其实只是“不让中文在字间断”，而中文本身本来就不需要空格也能断。真正让中文不断行的是 white-space: nowrap。
容易踩的坑：
- 单独用
keep-all处理长 URL，结果整条链接撑破容器 - 和
overflow-wrap: break-word搭配时，keep-all会抑制英文单词内断，反而导致换行失败 - 在
flex子项中未设min-width: 0，keep-all表现和没设一样
最麻烦的点其实是叠加态：white-space、overflow-wrap、word-break、flex/gird 最小宽度逻辑、table-layout 四者一碰就失效。调的时候别只盯一个属性，得一块儿看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
