white-space: nowrap仅控制文本内部空白处理，不防布局挤压或长单词断行；需配合flex-wrap: wrap、overflow: hidden、text-overflow: ellipsis及显式宽度等条件才生效。
white-space: nowrap 能防止单个导航项内文字折行，但单独加它几乎总失效——因为折行根本原因不在文本换行逻辑，而在盒模型或布局策略。
为什么加了 white-space: nowrap 还是折行？
常见错觉是「属性没生效」，实际是它只管空白符处理，不管以下情况：
- 父容器为
display: flex且未设flex-wrap: wrap，子项被强行挤在一行，内容溢出后浏览器可能视觉上“折到下一行”（其实是换行容器撑高） - 导航项本身被设为
display: block（比如某些重置 CSS 把<button></button>或<a></a>改成块级），nowrap对块级元素内部文本有效，但无法阻止该块自身占满整行 - 设置了
width: 100%、flex: 1或max-width过小，导致文字被压缩后触发浏览器在/、.、-处断词——这和white-space无关，得靠overflow-wrap: break-word或word-break: keep-all
移动端导航栏必须同时用 flex-wrap: wrap 和 white-space: nowrap
二者分工明确，缺一不可：
-
white-space: nowrap加在每个.nav-item上，确保“产品中心”不会变成“产品
中心” -
flex-wrap: wrap加在导航容器（如.nav-menu）上，让所有菜单项在空间不足时自动换行堆叠，而不是横向溢出或强制滚动 - 若只加
nowrap不加wrap：小屏下所有项硬挤一行，用户得左右拖动——违反移动端交互底线 - 若只加
wrap不加nowrap：单个项内文字仍可能折行，破坏按钮形状和点击热区
实现单行省略（…）的三个硬性条件
想让超长文字显示省略号而非折行或溢出，white-space: nowrap 只是其中之一，另外两个缺一不可：
-
overflow: hidden：隐藏溢出部分，否则省略号不生效 -
text-overflow: ellipsis：声明省略方式，仅对inline或inline-block元素有效 - 显式宽度限制：如
width: 120px或max-width: 150px；若用flex布局，需配合flex: none防止被压缩
示例关键代码：
.nav-item {<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br> max-width: 120px;<br> flex: none;<br>}
中文标签折行要额外防「中英文混排断点」
纯中文通常按字折行，但遇到 APIv3.2、订单#20260701、邮箱或 URL 时，浏览器会在 @、.、# 处断开——这不是 white-space 的责任：
- 加
word-break: keep-all防止汉字被拆（但会加剧英文长串溢出） - 补
overflow-wrap: break-word让浏览器只在必要时断英文/数字串 - 避免用
word-break: break-all，它会把“测试”硬切成“测
试”，破坏可读性
真正容易被忽略的是：这些属性组合在 flex 容器里可能因 min-width 缺失而失效——每个 .nav-item 至少设 min-width: max-content 或固定值，否则 flex 会无底线压缩它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
