flex布局下导航项仍换行，根本原因是flex-wrap默认为wrap且li默认flex-shrink:1；应显式设flex-wrap: nowrap、li用flex: 0 0 auto禁缩放，并配white-space: nowrap+overflow: hidden+text-overflow: ellipsis。
flex布局下导航项仍换行？检查 flex-wrap 和 flex-shrink
很多人写 nav ul { display: flex; } 后发现小屏上导航项突然折成两行，甚至文字被压扁——这不是 bug，是 flex-wrap 默认为 wrap，且每个 li 默认 flex-shrink: 1，浏览器会主动压缩或换行来保布局。
实操建议：
- 给
nav ul显式设flex-wrap: nowrap，彻底禁用自动折行 - 给每个
li加flex: 0 0 auto，禁止缩放，避免文字变长时被挤压变形 - 若内容超宽，配合
overflow-x: auto+scrollbar-width: none（Firefox）或-webkit-scrollbar隐藏滚动条，保留横向滑动能力
float 方案里换行了？overflow: hidden 不够，得清浮动上下文
老式 float: left 导航仍有人用，但一加响应式就出问题：导航项莫名掉到下一行，或父容器高度塌陷。根本原因不是样式漏写，而是浮动脱离文档流后，父 ul 没高度，“撑不住”子项。
关键点：
-
nav ul必须有清除浮动的机制，不能只靠overflow: hidden（它只是副作用，且在某些场景下失效） - 更可靠的是用伪元素：
nav ul::after { content: ""; display: table; clear: both; } -
li要设display: block或inline-block，否则float在 inline 元素上行为不可控
移动端强制单行导致横向溢出？别硬扛，用 min-width + 触控优化
设了 flex-wrap: nowrap 后，小屏上导航直接横向拉出屏幕，用户得手动拖拽——这体验比换行还差。问题不在 CSS 写错，而在没给“单行”定义安全边界。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
可落地的平衡方案：
- 给
nav设min-width: fit-content或具体值（如min-width: 320px），防止极端压缩 - 每个
a加white-space: nowrap，但必须配overflow: hidden+text-overflow: ellipsis，且width或flex-basis要明确（比如flex: 0 0 120px） - 触控区域至少
min-height: 44px，iOS Safari 才不会误判点击
为什么 white-space: nowrap 加了还是换行？它不作用于默认 inline 元素
给 nav a 直接写 white-space: nowrap 却没效果？因为 a 默认是 display: inline，而该属性对纯 inline 元素的换行控制力极弱——浏览器优先按行内盒模型排布，nowrap 很难介入。
必须闭环配置：
- 把
a改为display: inline-block或block，让它成为“可约束的盒子” - 确保父容器（如
li）有明确宽度或flex-basis，否则 nowrap 没参照系 - 如果父级是 flex 容器，记得给
li加min-width: 0，防止 flex item 默认最小宽度干扰 nowrap 行为
真正卡住效果的从来不是某一行 CSS，而是 width、display、white-space、overflow 这四者是否同时就位。少一个，文本就可能在你没注意的地方悄悄换行或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
