响应式布局中长单词撑破容器应优先用 overflow-wrap: break-word，它仅在整词放不下时断行；word-break: break-all 仅适用于纯技术字符串，对用户文本危险；需配合 width/max-width、white-space: normal 等属性协同生效。
长单词（比如 URL、Base64、哈希值）在响应式布局中撑破容器，不是 CSS 写错了，是浏览器默认不拆分连续字符——word-break 和 overflow-wrap 才是真正该动的属性，但用错一个值，英文就变“he…llo”，中文标题反而被切碎。
word-break: break-all 什么时候能用、什么时候不能碰
它会在任意两个字符之间硬切，不管是不是单词中间。对纯技术字符串有效，对用户可见文本危险。
- 能用：日志列表里的
sha256:abcdef1234567890、API 响应中的token=eyJhbGciOi... - 不能碰：按钮文字
Download Report、评论区昵称frontend-dev-2026、表格里的user@example.com（会被切成user@exa…） - 中文影响小，但混合排版时仍可能把
file-name-123切成file-nam…，语义断裂 - 必须配合
width或max-width才生效；只设word-break: break-all而没宽度限制，等于没写
overflow-wrap: break-word 才是正文和用户输入的默认选项
它不主动切词，只在整词放不下容器时才断开，优先保全可读性。现代项目应直接用这个，而不是已废弃的 word-break: break-word。
- 适合场景：消息气泡里的长 URL、移动端卡片标题、固定列宽的表格（如
/api/v1/users?filter=active） - 必须双写兼容旧浏览器：
word-wrap: break-word+overflow-wrap: break-word - 如果用了
display: flex，子元素还得额外加white-space: normal，否则 flex 默认的nowrap会屏蔽所有换行行为 - 别忘了配
overflow: hidden或max-width: 100%，否则内容可能撑开父容器导致布局偏移
移动端 Safari 的几个隐藏雷区
iOS 15.4 之前，word-break: break-all 在 contenteditable 或 textarea 中根本不起作用；而 overflow-wrap 在 Safari 12.1 之前支持不全——光靠一个声明搞不定。
- 编辑类场景（如富文本输入框）要加
-webkit-hyphens: auto，Safari 会把它当作断行触发器，哪怕内容里没有连字符 - 媒体查询里启用断行更安全：
@media (max-width: 480px) { .comment-text { overflow-wrap: break-word; } } - 测试时重点看 iOS 真机，模拟器有时会漏掉渲染 bug
- 如果父级是
display: inline或没设height/min-height，断行后文字可能“看不见”——视觉上还是单行，实际已换行但被裁剪
最常被忽略的是：断行不是独立动作，它依赖宽度约束、white-space 行为、display 类型三者协同。少一个，overflow-wrap: break-word 就像没写过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
