max-width对长单词或url无效，因浏览器默认按单词断行，连续字符被视为不可折行单元；需配合overflow-wrap: break-word或word-break: break-all等换行控制属性才能生效。

max-width 为什么对长单词或 URL 无效

因为浏览器默认按“单词”断行，而 https://example.com/very/long/path 或 aaaaaaaaaaaaaaaaaa 这类连续字符被当作一个不可折行的单元，max-width 只限制容器宽度，不干预内部换行逻辑。

必须显式告诉浏览器：允许在字符间断行。否则内容物理宽度直接突破容器边界，max-width 形同虚设。

• overflow-wrap: break-word（推荐）：只在必要时断词，优先保持单词完整
• word-break: break-all：强制任意位置断行，适合纯数据展示，但会切开正常单词（如 JavaScript → JavaScrip+t）
• 避免用已废弃的 word-break: break-word（仅旧 IE 支持）

pre 和 code 块里 max-width 不起作用

<pre class="brush:php;toolbar:false;"></pre> 默认 white-space: pre，完全禁用自动换行和空白合并，内容宽度天然爆炸——哪怕加了 max-width: 600px，它也只管“内容区上限”，不管内容是否折行。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

横向滚动条要出现，前提是内容物理宽度 > 容器宽度；而 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; 在任意位置断裂，调试困难

表格单元格撑开整个 table

<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 { overflow-wrap: break-word; } 或 td { max-width: 0; overflow: hidden; text-overflow: ellipsis; }

Flex 子项忽略 max-width

Flex 子项默认 flex-shrink: 1，但若同时设了 min-width: auto（默认值）或未设 min-width: 0，内容仍可能撑开容器——尤其当子项含图片、长文本或固定尺寸元素时，max-width 不会主动压缩。

• 显式加 min-width: 0，解除 flex 子项的最小宽度保护机制
• 避免只写 flex: 1，改用 flex: 0 1 auto 或明确 flex-basis
• 若子项是图片，必须额外加 max-width: 100% 和 height: auto，否则原始尺寸仍会突破

真正让 max-width 生效的，从来不是加一行 CSS，而是堵住所有可能撑开它的出口：盒模型、换行策略、布局上下文、子元素固有尺寸。最容易被跳过的，是 white-space 和 min-width: 0 这两个开关。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！