word-break: break-all 强制断词但破坏英文语义，overflow-wrap: break-word 更安全；flex 中需设 white-space: normal 才生效；兼容性上需双写 word-wrap/overflow-wrap。
word-break: break-all 会强制断词，但中文和英文表现不一致
中文本身没有空格分隔，word-break: break-all 对中文几乎没影响；但对英文、URL 或带连字符的字符串（如 user-id-123456789），它会在任意字符间切断，哪怕破坏单词语义。比如把 email@example.com 断成 emai… + l@exa…，可读性直接崩坏。
实操建议：
- 仅在明确接受「无意义断行」的场景用，比如日志 ID 列表、哈希值展示
- 避免用于用户可见的正文、按钮文字、表单标签等位置
- 搭配
overflow-wrap: break-word使用更稳妥（见下一条）
overflow-wrap: break-word 才是更安全的换行选择
overflow-wrap: break-word（旧名 word-wrap: break-word）只在单词整体放不下容器时才尝试断开，优先保留完整单词，实在不行再切。它比 word-break 更尊重语义，尤其适合混合中英文的 UI 文本。
常见错误现象：设置了 word-break: break-all 后，英文段落每行都从中间劈开，调试半天才发现该用 overflow-wrap。
使用场景：
- 评论区、消息气泡里可能出现超长 URL 或未加空格的英文串
- 表格中固定宽度的「文件名」或「API 路径」列（如
/api/v1/users/search?filter=active&sort=name） - 移动端卡片标题，需防止单个长单词撑破布局
flex 容器里 word-break 失效？先检查 white-space
在 display: flex 的容器中，子元素默认是 white-space: nowrap，此时无论怎么设 word-break 或 overflow-wrap 都不会换行——因为父容器不让它折。
典型错误：给一个 flex 卡片里的 .title 加了 word-break: break-word，结果长标题还是溢出。
解决办法很简单：
- 给该子元素显式设置
white-space: normal - 确保它有明确宽度限制（如
max-width: 100%或flex: 1） - 必要时加
overflow: hidden防止内容撑开父容器
兼容性提醒：IE 和 Safari 对 overflow-wrap 支持有差异
overflow-wrap 在 IE 中只认旧名 word-wrap，而 Safari 12.1 之前对 overflow-wrap: anywhere 支持不全。如果你需要支持老版本 Safari 或企业内 IE11，得写双声明：
text {
word-wrap: break-word;
overflow-wrap: break-word;
}
另外注意：overflow-wrap: anywhere 虽然能更激进地断词（包括在空格前），但它在 Chrome 82+ 才稳定，在 iOS Safari 14.5+ 才可用——线上项目慎用，除非你已明确用户环境。
真正容易被忽略的是：这些属性只对「块级非替换元素」生效。像 这类替换元素，得靠 max-width: 100% 或 width: fit-content 配合容器约束来控形，不是加个 word-break 就能管住的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
