移动端导航栏文字换行需同时设置 white-space: nowrap 防止单项内折行，及 flex-wrap: wrap 允许容器内菜单项自动换行，二者缺一不可；辅以 min-width、gap 和 flex-shrink: 0 等细节优化体验。
移动端导航栏文字换行，本质是空间不足时浏览器自动折行导致布局错乱。解决思路不是“禁止换行”或“强制不换行”单点发力，而是结合 white-space: nowrap 控制单个菜单项内文字、用 flex-wrap 管理整个导航容器的排列逻辑——两者分工明确，缺一不可。
让每个菜单文字不折行（nowrap）
默认情况下，<a> 或 <li> 内的文字在窄屏下会自动换行，破坏按钮形状和点击区域。给导航项加 white-space: nowrap 可阻止内部换行，保持“一行显示完”：
示例 CSS：
.nav-item {
white-space: nowrap;
padding: 0 12px;
}注意：仅加这句还不够——如果所有菜单项总宽度超过屏幕，它们会溢出或被压缩，此时需要容器配合处理。
立即学习“前端免费学习笔记（深入）”；
让导航容器可换行（flex-wrap: wrap）
导航外层用 display: flex 时，默认 flex-wrap: nowrap，即强行挤在一行，容易横向滚动或内容截断。改成 wrap 后，当空间不够，菜单项会自动换到下一行：
关键设置：
.nav-menu {
display: flex;
flex-wrap: wrap;
gap: 8px; /* 推荐用 gap 替代 margin，更可控 */
}这样，小屏下菜单自动转为多行堆叠，既避免文字折行，又不丢失任何选项。
补充适配细节，提升体验
-
限制最小宽度：给每个
.nav-item设min-width: max-content或固定值（如min-width: 80px），防止过窄挤压文字 -
响应式降级：当菜单项过多（比如 >5 个），建议在
max-width: 768px下改用汉堡菜单，比多行更节省空间 -
避免 flex-shrink 干扰：检查是否误设了
flex-shrink: 1，它会让菜单项在空间不足时缩小字体或压缩，应设为flex-shrink: 0
为什么不只用 nowrap？
只对容器设 white-space: nowrap 会让所有菜单强行横排，超出视口也不换行，用户需左右拖动——这违反移动端“无需平移”的交互原则。而只设 flex-wrap: wrap 不加 nowrap，单个菜单内文字仍可能折成两行（如“产品中心”在 320px 屏上变成“产品
中心”），影响美观和点击精度。二者配合，才真正兼顾可读性与布局弹性。
