下拉框 <select> 的 max-width 经常不生效，因弹出菜单脱离文档流且宽度由最长 <option> 决定；需用 box-sizing: border-box、width: fit-content 和 display: inline-block 控制触发区域宽度；菜单宽度须通过截断文本、零宽空格折行或替换为自定义组件（如 Choices.js）实现；移动端尤其 iOS 完全无视该样式，推荐 PC 用 JS 库、移动端降级并限制选项文本长度。
下拉框 <select> 的 max-width 为什么经常不生效
直接给 <select> 设置 max-width 在多数浏览器（尤其是 Chrome 和 Edge）中会被忽略——因为原生下拉框的展开菜单（popup）是脱离文档流的独立渲染层，其宽度由内部最长 <option> 文本决定，不受父容器 CSS 约束。
真正起作用的是控制「下拉框触发区域」（即未展开时的输入框部分）的宽度；而菜单弹出后的宽度需另寻方案。
让触发区域遵守 max-width 的可靠写法
关键是阻止浏览器默认样式干扰，用明确的盒模型控制：
- 必须设置
box-sizing: border-box，否则 padding/border 会撑宽 - 避免使用
width: 100%配合不定宽父容器，改用固定值或max-width+width: fit-content - 某些旧版 IE 要加
display: inline-block才认max-width
select {
max-width: 200px;
width: fit-content;
box-sizing: border-box;
display: inline-block;
}
限制下拉菜单（popup）宽度的实用方法
原生 <select> 的弹出菜单无法用 CSS 直接设宽，但可通过以下方式间接控制：
立即学习“前端免费学习笔记（深入）”；
- 在
<option>中用空格或零宽空格（）手动折行，避免单行过长 - 用
text-overflow: ellipsis+white-space: nowrap+ 固定width截断显示（仅对触发区域有效） - 真正可靠的方案：用 JS 库（如 Select2、Choices.js）或自定义下拉组件替代原生
<select>，它们把菜单渲染为普通 DOM，可自由设max-width
例如用 Choices.js 时，菜单容器类为 .choices__list--dropdown，可直接加：
.choices__list--dropdown {
max-width: 200px;
}
移动端适配要注意的坑
iOS Safari 和 Android Chrome 对原生下拉行为差异大：
- iOS 不渲染自定义菜单，强制调用系统选择器，
max-width完全无效 - Android 部分版本会将菜单宽度匹配最长
<option>，且无视min-width/max-width - 如果项目需强一致体验，别依赖原生
<select>—— 尤其当选项文本长度不可控时
最稳妥的做法是：PC 端用轻量级 JS 下拉库，移动端降级为原生 <select> 并接受系统默认行为，同时确保 <option> 文本本身不过长。
