导航文字小屏下因空格断行错乱，需为.nav-link显式设white-space: nowrap并配max-width，禁用flex-wrap: wrap；英文/URL撑宽时用@media精准启overflow-wrap: break-word；折叠菜单max-height宜用120vh适配。
导航文字在小屏下被空格断开，怎么办
根本不是内容太长，是浏览器默认在空格处折行。Bootstrap 4 的 .nav-link 没设 white-space: nowrap，导致“产品中心”变成“产品
中心”，高度突变、对齐错乱。
必须给每个 <a></a> 链接加这个声明，不能只靠父容器控制：
-
.nav-link { white-space: nowrap; }—— 强制单行，禁用空格断点 - 删掉
.nav-item上的flex-wrap: wrap—— 它会让导航项主动换行，破坏水平流 - 如果链接带图标，改用
display: flex; align-items: center;替代 inline 布局，避免 baseline 对齐引发高度抖动
英文/URL 撑破导航栏，怎么不切单词又不断行
中文不显眼，但 documentation 或 https://api.example.com/v2/long-path 这类无空格字符串，在 white-space: nowrap 下会直接撑宽整个导航栏，触发横向滚动。
不能全局上 word-break: break-all，那会把 “API” 切成 “A
I”，影响可读性。只对可能出问题的文本容器做精准控制：
立即学习“前端免费学习笔记（深入）”；
- 移动端用
@media (max-width: 768px)单独加：overflow-wrap: break-word; word-break: break-word; - 桌面端保持
word-break: normal，确保单词完整 - 别对按钮、品牌名、下拉箭头图标等元素应用断词规则
折叠菜单展开后内容被截断，max-height 怎么设才安全
Bootstrap 4 默认用固定 max-height（比如 300px）做过渡动画，不是按真实内容算的。一旦有下拉菜单、大 padding 或文字换行，就很容易被 overflow: hidden 切掉。
直接写 max-height: none 或 fit-content 会让 CSS 动画失效。稳妥做法是：
-
.navbar-collapse.show { max-height: 120vh !important; }——vh自适应屏幕，120% 覆盖绝大多数内容 - 若菜单项少（3–5 个），可估算：每项约
48px，加余量写死max-height: 200px，更轻量 - 这条规则必须放在自定义 CSS 文件末尾，或用高权重选择器如
.navbar.navbar-expand-lg .navbar-collapse.show
为什么加了 white-space: nowrap 还是换行
常见错觉是“类没生效”，其实是 <th> 或 <code><li> 类容器没约束宽度，或者长单词内部被强制断开。
关键检查点：
-
.nav-link必须同时有white-space: nowrap和明确的max-width（比如max-width: 160px） - 确认没和
.text-break同时使用 —— 两者互斥，后者会被前者覆盖 - 如果用了
.table-responsive包裹导航栏，它自带white-space: nowrap，再额外加就是冗余，还可能干扰子元素布局
最稳的方式是内联写：<a class="nav-link" style="white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis;">超长菜单名称</a>。宽度值要实测，不是抄别人。
