max-width 失效的四大原因及解法：一是长连续字符需用 overflow-wrap: break-word 或 word-break: break-all；二是 pre 标签需改 white-space: pre-wrap；三是表格需 table-layout: fixed；四是 flex 子项须设 min-width: 0。
max-width 被长文本或连续字符绕过？检查 white-space 和 word-break
设置了 max-width: 600px 却发现容器被一串无空格的英文、数字或 URL 撑开，根本原因是：浏览器默认按“单词”为单位换行，而连续字符（如 aaaaaaaaaaaaaaaaaaaa 或 https://example.com/very/long/path/with/no/spaces）被当作一个不可折行的“单词”，max-width 失去约束力。
-
white-space: normal（默认）会忽略换行符但**仍要求有空格或标点才能断行**，对纯字符无效 -
word-break: break-all强制在任意字符间断行，能立刻收住宽度，但可能把单词（如JavaScript）切成JavaScrip+t，影响可读性 -
word-break: break-word（已废弃，仅旧版 IE 支持）不推荐；现代应改用overflow-wrap: break-word -
overflow-wrap: break-word更智能：只在必要时（内容超宽且无其他换行点）才断词，优先保持单词完整
pre 标签和代码块里 max-width 不生效？别只加 overflow-x
<pre class="brush:php;toolbar:false;"></pre> 默认 white-space: pre，完全禁用换行和空白合并，此时 max-width 形同虚设——哪怕你加了 overflow-x: auto，横向滚动条出现的前提是内容物理宽度 > 容器宽度，而 pre 内容根本不折行，宽度天然爆炸。
- 必须显式覆盖
white-space：用white-space: pre-wrap（保留换行符和空格，但允许自动换行）或white-space: pre-line（合并空白，但保留换行符并允许折行） -
overflow-x: auto要配合width: 100%或max-width: 100%才能触发滚动，否则容器可能随内容无限宽 - 慎用
word-break: break-all在代码块里：它会让const myVariableName = 123;在任意位置断裂，调试时极难定位
表格单元格（td/th）撑开整个 table？table-layout 是关键
<table> 默认是 <code>table-layout: auto，浏览器先遍历所有内容算出“理想列宽”，再分配空间——这时 max-width 对 <td> 几乎无效，因为列宽由最长单元格决定，父 <code><table> 的 <code>max-width 会被无视。
- 必须给
<table> 设 <code>table-layout: fixed，让列宽由第一行<col>或<th> 的 <code>width/max-width控制 - 再配合
width: 100%和max-width: 800px，才能让表格整体响应式收缩 - 单元格内长文本仍需额外处理：
td { word-break: break-word; }或td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }（后者截断显示） - 核心解法：
min-width: 0（或flex: 1 1 0，等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） -
min-width: 0告诉浏览器：“这个元素可以缩到比内容还窄，靠max-width或overflow来兜底” - 只设
flex-shrink: 1不够——如果min-width还是auto，收缩过程会在触及内容最小宽度时停止，max-width永远没机会生效 - 验证方式：打开 DevTools → Computed → 查看
min-width实际值，不是写在 Styles 里的那行
flex 子项无视 max-width？min-width: 0 是开关
Flex 容器中子项默认 min-width: auto，即“至少要容纳自己的最小内容宽度”。哪怕你写了 max-width: 400px，只要内容本身（比如一张未缩放的图或一段长 URL）最小宽度 > 400px，它就坚决不缩，直接撕裂容器。
max-width 看似失效时，得一层层查：是不是文本在捣鬼？是不是 <pre class="brush:php;toolbar:false;"></pre> 锁死了换行？是不是表格自己算列宽？还是 flex 用默认 min-width 把你拦在门外？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
