最可靠方案是 word-break: break-all，但会任意断字；更温和的现代推荐是 overflow-wrap: anywhere，兼容性要求高时回退到 word-wrap: break-word；white-space: normal 对纯数字/英文无效，因其将连续ASCII字符视为不可分割单元，仅处理空白符换行。
直接给结论：用 word-break: break-all 最可靠，但要注意它会在任意字符间断开；若想更“温和”些，优先选 overflow-wrap: anywhere（现代标准），兼容性要求高时 fallback 到 word-wrap: break-word。
为什么 white-space: normal 对纯数字/英文无效？
浏览器默认把连续的 ASCII 字符（如 abc123xyz）当作一个“不可分割单元”，即使容器宽度不足，也不会像中文那样在字间自动换行。这不是 bug，是规范行为——英文单词本就不该被随意切开。
-
white-space: normal只处理空格、制表符、换行符等空白符，对无空格长串无效 - 中文字每个字自带语义边界，天然支持“字间换行”；英文字母和数字没有这种边界
- 所以必须显式启用“允许在词内断开”的能力
word-break: break-all 是最暴力也最兼容的方案
它强制在任意两个字符之间都能换行，不挑语言、不看语义，适合后端吐出的原始 ID、token、日志片段等场景。
- IE8+、Chrome、Firefox、Safari 全支持（包括旧版
word-break: break-all） - 缺点：可能把
https断成ht+tps，影响可读性 - 必须配合固定宽度（如
width: 200px）和块级显示（display: block或默认块元素）才生效 - 示例：
.break-anywhere { width: 200px; word-break: break-all; }
overflow-wrap: anywhere 是现代推荐写法
它是 word-wrap 的标准化新名，anywhere 值比旧 break-word 更智能：优先找空格、连字符、斜杠等软换行点，实在没得选才切字母或数字。
立即学习“前端免费学习笔记（深入）”；
- Chrome 65+、Firefox 69+、Safari 15.4+ 支持；Edge 79+ 起支持
- 旧版 Firefox（anywhere，但支持
break-word（效果接近） - 建议写法：
.wrap-safe { width: 200px; overflow-wrap: anywhere; word-wrap: break-word; }—— 后者是前者的别名，作为降级兜底 - 注意：
overflow-wrap必须搭配overflow: hidden或内容溢出才会触发，单纯设了不一定会立刻换行
表格（table）里怎么让 td 内容折行？
表格单元格默认有弹性，光加 word-break 不一定生效，关键要先锁死布局逻辑。
- 必须加
table-layout: fixed到table元素上，否则列宽由内容撑开，折行无从谈起 -
td需设width（百分比或像素），再叠加word-break: break-all或overflow-wrap: anywhere - Firefox 下
overflow: auto在td中常失效，改用overflow: hidden更稳 - 示例：
table { table-layout: fixed; width: 300px; } td { width: 100px; word-break: break-all; overflow: hidden; }
真正容易被忽略的是：这些属性只对块级容器起作用。如果内容在 span 或其他行内元素里，得先加 display: inline-block 或 display: block，否则样式压根不计算。
