直接加 overflow-wrap: break-word 无效，必须配合明确宽度约束（如 max-width: 100% 或固定 width），且需避免 white-space: nowrap 覆盖；Flex/Grid 子项还需显式设 min-width: 0 才能触发换行。
超长URL或英文单词撑破容器怎么办
直接加 overflow-wrap: break-word，但必须配合明确宽度约束（如 max-width: 100% 或固定 width），否则它不生效。浏览器只在“非断不可”时才介入——比如容器宽 200px，里面有个 https://example.com/very-long-path，它会优先找 /、. 这类软换行点切开，而不是把 very 拆成 ve-ry。
常见错误：只写 overflow: hidden + width，漏掉 overflow-wrap，结果 URL 直接溢出卡片，右侧按钮被顶飞。
-
word-wrap是旧名，现在统一用overflow-wrap（所有现代浏览器都支持） - 别和
white-space: nowrap同时用——等于锁死换行能力 - 移动端尤其要注意父容器是否用了
flex或grid，它们可能隐式影响子元素的可用宽度
中英文混合文本里数字串被乱切怎么修
用 word-break: break-all 是最常见误操作。它会让 ORD-2026-789012 变成 ORD-20 和 26-789012，用户根本认不出是同一个订单号。
正确做法是保留 overflow-wrap: break-word + white-space: normal，再针对纯数字/字母串区域单独加一层控制：
立即学习“前端免费学习笔记（深入）”；
- 对后台 ID、traceID 等字段，用
word-break: break-all局部启用，但仅限该 class - 对用户评论、表单输入等通用区域，坚持用
overflow-wrap: anywhere（比break-word更智能，优先空格/标点，次选字符间） - 中文段落本身不受影响，因为 CJK 文本默认就允许字间换行，不需要额外加
break-all
为什么 white-space 不只是“要不要换行”
它实际决定空格、制表符、回车符怎么处理，进而影响换行起点。比如用户提交的评论含手动换行，用 white-space: normal 会把所有回车当空格合并掉；而 white-space: pre-wrap 能保留原始段落结构，同时允许长单词自动折行。
-
pre-wrap：适合富文本编辑器输出、带缩进的代码说明、诗歌类内容 -
normal：适合大多数正文、卡片描述、列表项文字 -
nowrap和overflow-wrap冲突，一上一下直接失效
移动端窄屏下换行策略要更保守
小屏幕本身宽度紧张，激进断行反而降低可读性。测试发现，overflow-wrap: anywhere 在 iOS Safari 和 Android Chrome 上表现最稳，它比 break-word 多一层语义判断，比 break-all 少一半误切风险。
真正容易被忽略的是字体渲染差异：某些中文字体（如思源黑体）在小字号下字间距压缩，导致“看起来没换行”，其实只是视觉粘连。此时加 letter-spacing: 0.01em 微调即可缓解。
复杂点在于表格单元格或 flex 子项这类受限上下文——它们的宽度可能由内容反推，overflow-wrap 有时会“以为自己够宽”，结果不触发。这种场景必须显式设 max-width: 0 或 min-width: 0 来释放弹性。
