强制导航栏文字不换行需组合设置white-space:nowrap、overflow:hidden、text-overflow:ellipsis、max-width和display:inline-block，单用text-nowrap无效。
Bootstrap 导航栏（.navbar）里的文字默认不会主动换行，但一旦内容过长、容器变窄或受父级 flex 布局影响，就极易折行——这不是 bug，而是浏览器对 inline 元素的自然响应。要真正“强制不换行”，必须切断所有可能的断点来源，不能只靠 text-nowrap。
为什么加了 text-nowrap 还是换行？
常见原因不是类没加载，而是它被更高优先级样式覆盖，或根本没作用到实际文本节点上：
-
.navbar-nav是display: flex容器，其子项（.nav-link）默认有min-width: auto，浏览器宁可让内部文字换行，也不压缩链接宽度 -
.nav-link内部若含<span></span>、图标（如<i class="bi bi-house"></i>）或富文本，这些元素可能继承了不同white-space值，形成“断点污染” - 父级
.navbar或.container设了flex-wrap: wrap（尤其在小屏下），整个导航条先换行，再谈单个链接文字是否换行已无意义 - 开发者工具里查
.nav-link的 computedwhite-space，发现值仍是normal→ 说明text-nowrap被.nav-link自带样式或 SCSS 变量（如$nav-link-white-space）覆盖了
.nav-link 内文字强制单行 + 省略号的最小配置
仅加 text-nowrap 不够，必须组合控制宽度与溢出：
- 给
.nav-link加style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; display: inline-block;" -
max-width是硬性前提：没有它，text-overflow: ellipsis永远不触发；值需根据字体大小和 padding 手动试调（140px是常见起步值） - 显式声明
display: inline-block：防止某些主题把.nav-link改成flex或block后失效 - 避免用
width: 100%或w-100：在.navbar-nav的 flex 布局里，它会被拉满，失去截断意义
含图标时文字仍不截断？检查内联子元素
图标（<i></i>、<svg></svg>）常是罪魁祸首：
- Bootstrap Icons 或自定义 SVG 默认设了
white-space: nowrap，会锁死整行文本流 - 解决方案：给图标加
style="white-space: normal;"，或包裹文字部分用<span></span>单独控制 - 更稳妥结构：
@#@#@#@#@#@#@#@#@#@0 - 别用
flex包裹文字本身：比如<span class="d-flex"></span>会破坏内联上下文，text-overflow失效
响应式场景下如何保持小屏不换行？
移动端视口窄，max-width 容易被撑爆，单纯截断会丢失关键信息：
- 优先考虑横向滚动：给
.navbar-nav加class="flex-nowrap overflow-x-auto"，并确保父.navbar有overflow-x: visible（默认就是） - 配合
.nav-link的flex-shrink: 0，防止它被 flex 压缩导致文字挤在一起 - 若必须截断，用媒体查询动态调小
max-width：@media (max-width: 576px) { .nav-link { max-width: 80px; } } - 最易忽略的一点：
.navbar-brand若也参与导航流，它默认white-space: normal，且无max-width，会率先撑宽整条导航栏，间接导致其他.nav-link换行
真正起作用的永远是那几行 CSS 属性组合，而不是某个孤立的类名；text-nowrap 只是起点，不是终点。调试时务必打开开发者工具，逐层检查 computed styles 中的 white-space、overflow 和 max-width 实际值——很多“失效”，其实只是你没看到它被谁悄悄覆盖了。
