word-break: break-all 不是“一加就断”，必须同时满足父容器有 width/max-width、内容未被 white-space: nowrap 锁死、flex 子项显式设 min-width: 0；缺一则失效，尤以 min-width: 0 在 flex 中最易忽略。

word-break: break-all 为什么写了也不换行

它不是“一加就断”，而是依赖三个硬性前提：父容器必须有 width 或 max-width；内容不能被 white-space: nowrap 锁死；如果是 flex 子项，必须显式设 min-width: 0。缺一不可——尤其 min-width: 0 在 flex 布局里常被忽略，导致浏览器宁可撑宽容器也不换行。

flex 容器里加了 word-break: break-all 还是溢出怎么办

直接原因是子元素继承了 flex 默认的 min-width: auto，相当于给内容加了“不压缩锁”。解法很明确：

Feihong Word Docx

创建、检查和编辑 Microsoft Word 文档和 DOCX 文件，支持样式、编号、修订追踪、表格、分节及兼容性检查

下载

• 给子元素加 min-width: 0（推荐写在同一样式规则里，避免覆盖）
• 确认没同时写 flex-shrink: 0——它会覆盖 min-width: 0
• 父容器需有宽度约束，比如 max-width: 100% 或具体像素值
• 检查 computed 样式中 min-width 是否真为 0px，比看源码更可靠

word-break: break-all 和 overflow-wrap: break-word 到底用哪个

关键看语义是否允许破坏：

• word-break: break-all：适合 token、哈希、日志 ID 等纯技术字段，会在任意字符间切断，比如把 api_key_123456789 拆成 api_k + 换行 + ey_123456789
• overflow-wrap: break-word：更适合用户可见文本，如长链接、邮箱、带连字符的术语，只在整词放不下时才断，优先保语义
• 两者别混用——break-all 会覆盖 break-word 行为；老项目需双写 word-wrap: break-word 兼容 IE/Safari 旧版

中英文混排时长英文串还是溢出

中文本身可自然断字，但夹着的英文长串（如“错误：invalid_token_expired”）仍可能撑破。这时单靠 overflow-wrap: break-word 不够，得配合 word-break: keep-all：

• word-break: keep-all 阻止中文被意外劈开，同时让英文部分按 overflow-wrap 规则处理
• 注意它对纯英文无效，必须和 overflow-wrap: break-word 同时用
• 移动端 iOS 12 以下需补 -webkit-word-break: keep-all
• 别全局设 keep-all，只加在明确含中英混排的容器上，比如 .comment-text

真正卡住换行的，往往不是属性写错，而是 min-width: auto 在 flex 里悄悄锁死了子项，或者容器根本没宽度边界。先查 computed 值，再改样式，比反复试属性更省时间。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！