导航文字小屏换行不是文字主动行为，而是浏览器在flex容器中默认允许缩放和折行所致；根源在于flex-shrink: 1（默认开启）且未正确设置flex-wrap或white-space，导致菜单项被压扁、文字断行或横向溢出。
导航文字为什么在小屏上突然换行？
不是文字“想换行”，是浏览器在 flex 容器里默认允许缩放和折行。常见表现：nav ul设成display: flex后，小屏下菜单项被压扁、文字断开、甚至出现横向滚动条——根源是flex-shrink: 1（默认开启）+没设flex-wrap或设错了。
关键点：文字换行本身不是 bug，但发生在不该发生的地方，就是布局失控的信号。
-
flex-shrink: 1让菜单项主动压缩宽度，长词（如“ORGANISATION”）直接被挤到第二行 -
flex-wrap: wrap若误加在.menu__item上，等于给每个菜单项自己开换行权限，结果就是竖着堆叠 - 没限制
white-space时，内联链接a在空间不足时自动折行，尤其字体大、padding多时更敏感
怎么让导航文字只在必要时才换行？
目标不是“禁止所有换行”，而是把换行控制权收回来：桌面端单行撑满，移动端按需折行，且折得整齐不溢出。
- 给
.menu__link加white-space: nowrap——这是最直接的干预，防止链接内部文字被拆开 - 给
.menu__item设flex: 0 0 auto，关掉flex-shrink，确保文字变长时容器不缩 -
nav ul必须设flex-wrap: wrap（不是子项），窄屏时整行菜单自动折成两行，比硬撑单行更可靠 - 配合
justify-content: space-around，避免最后一项贴边，折行后左右留白一致
图片Logo和文字混排时换行错乱怎么办？
Logo 图片被裁剪 + 文字换行错位，往往是一起发生的连锁反应。典型错误是给.header__logo设固定高+width: 100%，再套object-fit: cover——图片被暴力拉伸，同时挤压相邻文字空间，触发异常折行。
- 删掉
height: 70px这种硬约束，改用max-height: 70px+height: auto -
.int42h这类图片容器别设width: 100%，用max-width: 100%+height: auto保比例 - 如果 Logo 和文字在同一
flex行里，给 Logo 加flex-shrink: 0，防止它被文字挤变形 - 测试时拉窄窗口，观察是文字先折还是 Logo 先变形——谁先失守，就优先 fix 谁的 flex 行为
响应式断点里换行策略怎么配？
换行不是“一刀切”，不同断点要不同策略。比如 768px 是常见分界，但实际要看内容密度，不是死守数值。
- 大屏（>1024px）：
.menu__link保持white-space: nowrap，靠gap控制间距 - 中屏（769–1024px）：可开始放宽
font-size，用clamp(1rem, 2.5vw, 1.2rem)动态缩放，延缓折行 - 小屏（≤768px）：移除
white-space: nowrap，让文字自然换行；同时nav ul设flex-direction: column转垂直菜单 - 别忘了
@media (max-width: 480px)里给.menu__link加text-align: center，避免折行后左右不对齐
换行美化真正的难点不在 CSS 写几行，而在于判断“哪里该断”“断了之后怎么对齐”“断完会不会把 Logo 推跑”——这些都得在真实设备上拖动窗口反复看，参数调得再准，不亲眼确认就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
