max-width 是 CSS 属性，非 HTML 属性；对 inline 元素无效，需设 display 为 block/inline-block/flex/grid；百分比值依赖父容器宽度；长单词需配合 overflow-wrap: break-word；select 下拉菜单不受其控制；非响应式断点机制。
max-width 不是 HTML 属性，而是 CSS 属性。直接在标签里写 maxwidth="300" 或 max-width="300px" 完全无效——浏览器会静默忽略它。
为什么 max-width 加了却没反应？
常见错误现象：给 <p>、<span>、<label> 这类默认 display: inline 的元素直接设 max-width，结果毫无变化。
原因很直接：内联元素不参与盒模型的宽高计算，max-width 对它无意义。
- 必须先让元素具备“可约束宽度”的行为：加
display: block、display: inline-block、display: flex或display: grid - 如果父容器没设宽（比如
<body>下直接放一个<div>），max-width: 80%会因百分比基准为 0 而失效 - 某些旧版 IE（如 IE7）不支持
inherit值；IE8 需要严格!DOCTYPE才认
怎么让文字内容真正受 max-width 控制？
只设 max-width 不够，长单词（如 URL、UUID、连续英文）仍会撑破容器。
立即学习“前端免费学习笔记（深入）”；
- 必须配合
word-wrap: break-word或更现代的overflow-wrap: break-word - 避免用
white-space: nowrap，否则折行逻辑被禁用 - 对
<pre>或code类文本，还需加white-space: pre-wrap保留换行同时允许折行
典型写法：
div.text-container {
max-width: 400px;
display: block;
word-wrap: break-word;
overflow-wrap: break-word;
}
原生 <select> 的 max-width 为什么经常失灵？
因为下拉菜单（popup）是脱离文档流的独立渲染层，不受 CSS 盒模型控制。
-
max-width只能约束“触发区域”（即未展开时的框体），需搭配box-sizing: border-box和width: fit-content才稳定生效 - 弹出菜单宽度由最长
<option>文本决定，Chrome/Edge 默认无视父级max-width - iOS Safari 强制调用系统选择器，任何 CSS 对菜单宽度都无效
- 真正可控的方案：用
Choices.js或Select2，它们把菜单渲染成普通 DOM，可直接对.choices__list--dropdown设max-width
移动端和兼容性要注意什么？
不是所有设备都按规范渲染 max-width，尤其当涉及缩放、视口或输入法场景时。
- Android Chrome 某些版本对
<select>菜单宽度处理不一致，min-width也可能被忽略 - 使用
%单位时，确保父容器有明确宽度（比如width: 100vw或固定px），否则计算结果为 0 - 不要依赖
max-width做响应式断点判断——该属性不触发媒体查询，要用@media (max-width: ...) - 如果目标是截断超长文本并显示省略号，
max-width必须配合white-space: nowrap+overflow: hidden+text-overflow: ellipsis
最常被忽略的一点：max-width 是“最大”，不是“固定”。当内容本身比设定值窄时，它会自动收缩——如果你需要始终占满指定宽度，请用 width，而不是 max-width。
