通用方案是：优先用 flex-wrap: wrap 实现子元素换行，配合 overflow-wrap: break-word 处理长单词/URL 内部断行；若需兼容旧浏览器，可用 inline-block + white-space: normal，但须额外处理间隙与断行。
元素超出容器宽度时自动换行的通用方案
默认情况下，div、span等块级或内联元素不会因为容器变窄就自动折行——尤其是当它们被设为display: inline-block或包含长单词/连续无空格字符串时。真正起作用的是 CSS 的换行控制机制，而不是“让元素自己决定要不要换”。
用 flex-wrap: wrap 让子元素在 Flex 容器中换行
这是最可控、最常用的方式，尤其适合按钮组、标签云、响应式卡片布局：
-
display: flex必须设在父容器上，子元素默认是flex-direction: row - 加上
flex-wrap: wrap，子元素超出宽度后会自动换到下一行 - 避免给子元素设固定
width或min-width过大，否则仍可能撑破容器 - 如果子元素用了
white-space: nowrap，需额外重置它，否则内部文字不折行也会导致整体不换行
用 display: inline-block + white-space: normal 配合父容器处理
适用于兼容老浏览器（IE9+）或需要保留文本流语义的场景，但坑较多：
- 父容器必须设
white-space: normal（默认值，但有时被重写过） - 子元素设
display: inline-block后，HTML 中的换行符会产生约 4px 间隙，可用font-size: 0或注释删空格缓解 - 若子元素含长英文单词或 URL（如
https://example.com/very-long-path），需额外加word-break: break-word或overflow-wrap: break-word - 父容器不能设
text-align: justify，否则末行对齐可能破坏换行节奏
遇到长单词/URL 不折行？优先用 overflow-wrap: break-word
这不是让“元素换行”，而是让元素内部内容主动断行，常和上面两种布局配合使用：
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word（推荐）比word-break: break-all更智能：只在必要时断词，保留可读性 - 对
<pre class="brush:php;toolbar:false;"></pre>或code这类默认禁用换行的元素，必须显式覆盖white-space: pre-wrap - 注意 Safari 对
overflow-wrap的支持曾有 bug，iOS 12–13 需加word-wrap: break-word前缀（已废弃但仍有兼容价值） - 不要只靠
max-width，它不触发换行逻辑，只是限制尺寸
真正卡住的往往不是“怎么换行”，而是没意识到换行由谁控制：是容器的布局模式（flex/grid），还是内容自身的断行规则（overflow-wrap/word-break）。混用时容易互相覆盖，建议先定容器布局，再调内容断行。
