overflow-wrap: break-word是首选解法，需配合width/max-width生效，它优先在自然断点（空格、标点等）换行，仅当整词溢出时才内部断开，兼顾防溢出与可读性。
直接用 overflow-wrap: break-word，但必须配合有明确宽度限制的容器（比如 max-width 或 width），否则它根本不会触发。
为什么 overflow-wrap: break-word 是首选
它不是一上来就砍单词，而是先尝试在空格、标点、中文字符边界等“合理位置”换行；只有当整段内容（比如一个无分隔符的 Base64 字符串）实在放不下时，才在单词内部断开。这对 URL、API 路径、token 这类内容最友好——既防溢出，又保可读性。
常见错误现象：overflow-wrap: break-word 写了但没效果 → 八成是父容器没设 max-width 或 width，浏览器压根没“换行动机”。
- 中英文混排时，建议搭配
word-break: keep-all，防止中文被意外劈开（注意：iOS 12 及更早版本需加-webkit-word-break: keep-all兜底） - 纯英文长串场景下，
word-break: keep-all无效，此时靠overflow-wrap自身兜底即可 - 别用已废弃的
word-wrap: break-word单独写——虽然多数浏览器还认，但规范里它只是overflow-wrap的别名，没必要留冗余
word-break: break-all 什么时候能用、什么时候不能用
它真能无差别切任意字符，但有两个硬前提：容器得是块级元素 + 必须有明确宽度。在 display: flex 或 display: grid 里，子项默认带 min-width: auto，会锁死压缩行为——这时写 break-all 就是白写。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：flex 容器里放了个长 URL，写了 word-break: break-all 却不换行 → 检查子项是否被 min-width: auto 卡住。
- 修复方法：给子项加
min-width: 0或overflow: hidden，松开这个限制 - 避免用于
table-cell，Safari 旧版本对它的支持不一致 - 别在需要语义完整的场景（如日志详情、用户可见的 token）里滥用，它可能把
accessToken切成accessT…这种不可读片段
overflow-wrap: anywhere 的真实价值在哪
它和 break-word 表面效果相似，但底层逻辑不同：当容器宽度由内容决定（比如 width: fit-content 或 flex 子项），anywhere 会让元素的最小内容宽度缩到单个字符宽，而 break-word 仍按最长单词算宽度。这意味着在弹性布局里，anywhere 更容易“挤进去”。
适用场景：
- flex 子项含长 URL，又希望它自适应收缩（比如卡片标题）
- grid 中某列设为
grid-template-columns: auto 1fr，但不想被长单词撑爆 - 不需要连字符（
hyphens）支持，且能接受更激进的断点
注意：anywhere 不会保留单词完整性，它比 break-word 更愿意提前断，所以别在强调可读性的正文段落里无脑替换。
别漏掉 white-space 的协同作用
如果容器里还有代码片段（比如 const myVariableName = 123），光靠 overflow-wrap 不够——它不管缩进和换行符。这时候加 white-space: pre-wrap 才完整：既保留原始空格与换行，又允许长单词在必要时断行。
其他常见组合：
-
white-space: normal是默认值，适合常规段落，但对无空格长串无效 -
white-space: nowrap会彻底禁用换行，哪怕写了overflow-wrap也无效 -
pre和pre-line各有用途，但都不如pre-wrap在兼顾格式与换行上平衡
真正容易被忽略的是：这些属性不是孤立生效的，overflow-wrap 控制“能不能断”，word-break 影响“在哪断”，white-space 决定“要不要管空白”——三者叠加才能覆盖大多数真实排版需求。
