word-break 和 overflow-wrap 触发条件不同：前者暴力拆词，后者礼貌换行；中文场景推荐 overflow-wrap: break-word + word-break: keep-all。
word-break 和 overflow-wrap 都能强制断行，但触发条件完全不同
两者常被混用，但实际行为差异很大：word-break 是“暴力拆词”，只要容器不够宽就直接在任意字母/汉字间切断；overflow-wrap（旧名 word-wrap）是“礼貌换行”，只在实在没别的办法时才拆长单词，优先保持单词完整。
word-break: break-all 会无差别切中文和英文，慎用
中文没有空格分隔，word-break: break-all 会让所有文字像英文一样被逐字切断，比如“人工智能”可能变成“人工智…”，阅读体验极差。它真正适合的场景其实很窄：
- 显示日志、代码片段等纯技术文本，内容本身无需语义连贯
- 表格中固定宽度的 ID 或哈希值列（如
abc123def456），必须塞进窄列 - 配合
white-space: nowrap做单行截断时作为兜底（但此时更推荐text-overflow: ellipsis）
overflow-wrap: break-word 才是响应式文本的默认安全选择
它只在整词超长且无法用空格换行时才介入，对中文、英文都友好。注意它的生效前提是父容器有明确宽度限制（比如 max-width: 300px），否则无从判断“是否溢出”。
div {
width: 200px;
overflow-wrap: break-word;
/* 等价写法（兼容老浏览器） */
word-wrap: break-word;
}常见误配：overflow-wrap: anywhere 虽然也允许断词，但它比 break-word 更激进——即使单词后面有空格，也会主动在词内断开，目前仅建议用于排版控制极强的场景（如 PDF 导出样式），日常 Web 不推荐。
立即学习“前端免费学习笔记（深入）”；
遇到换行失效？先检查这三件事
无论用哪个属性，以下问题最常导致“写了也不管用”：
-
white-space被设为nowrap或pre，直接禁用了换行逻辑 - 父容器没设置
width/max-width，CSS 无法计算“是否溢出” - 文本里混用了
中文长段落换行最稳的组合其实是：overflow-wrap: break-word + word-break: keep-all（后者禁止中文内断，让前者专注处理超长英文/URL）——这点容易被忽略，但恰恰是移动端阅读体验的关键。
