navbar-brand文字不响应text-overflow: ellipsis，因其默认display为inline或inline-flex，而该属性生效需同时满足：display为block/inline-block、white-space: nowrap、overflow: hidden及明确宽度（如max-width），四者缺一不可。
为什么 navbar-brand 文字不响应 text-overflow: ellipsis
因为默认的 .navbar-brand 是 display: inline（或 inline-flex），而 text-overflow: ellipsis 要求元素必须是块级容器、有明确宽度、且 white-space: nowrap + overflow: hidden —— 三者缺一不可。直接加 text-truncate 类无效，就是卡在这儿。
常见错误现象：text-truncate 没反应，文字照常换行或撑宽导航栏；用 vw 或百分比设宽也不生效，因为父容器（.navbar）通常没设 width，子元素无法相对计算。
- 必须把
.navbar-brand改为display: inline-block或block - 必须显式设置
max-width（不能依赖父容器流式宽度） - Bootstrap 5+ 的
text-truncate类只对display: block或inline-block生效，且内部不能有换行元素（如<span>套多层）
Bootstrap 5 中正确写法（推荐用 utility 类）
不用写自定义 CSS，靠 Bootstrap 自带工具类组合即可。关键是控制层级和渲染模式：
<a href="#" class="navbar-brand d-inline-block text-truncate" style="max-width: 160px;"> 非常非常长的品牌名称超出了导航栏宽度 </a>
说明：
-
d-inline-block确保块级行为，支持max-width和截断 -
text-truncate内置了overflow: hidden、text-overflow: ellipsis、white-space: nowrap -
style="max-width: 160px"必须内联或用自定义 CSS 类——因为mw-*工具类（如mw-50）在inline元素上不生效 - 如果品牌含图标，把
<img>和文字包进同一个d-inline-block容器里，否则图标会破坏截断逻辑
响应式场景下如何动态调整省略宽度
固定 max-width 在小屏下可能过宽，大屏下又太窄。不要用 JS 监听 resize，优先用 CSS 媒体查询配合自定义类：
<a href="#" class="navbar-brand d-inline-block text-truncate brand-truncate"> 品牌名很长很长 </a>
然后加 CSS：
.brand-truncate {
max-width: 200px;
}
@media (max-width: 768px) {
.brand-truncate {
max-width: 120px;
}
}
@media (max-width: 576px) {
.brand-truncate {
max-width: 90px;
}
}注意点：
- 别用
vw单位（如max-width: 20vw），Navbar 高度变化时文字可能突然截断或恢复，视觉跳变明显 - 如果用了
navbar-expand-*（如navbar-expand-lg），折叠态（移动端）下.navbar-brand会进入折叠菜单，此时截断逻辑自动失效——这是预期行为，不用额外处理 - 避免在
.navbar-brand里嵌套<div>或<p>，它们会重置 display 行为，导致截断失效
使用 Flex 布局时的特殊处理（如 navbar-nav 同行排列）
当 .navbar-brand 和 .navbar-nav 处于同一 flex 容器（如 .navbar-collapse 或 .container-fluid）中时，flex 项目默认不收缩，max-width 可能被忽略。
解决办法：给 .navbar-brand 加 flex-shrink: 1，并确保父容器未设 flex-shrink: 0：
<a href="#" class="navbar-brand d-inline-block text-truncate flex-shrink-1" style="max-width: 140px;"> 超长品牌名 </a>
或者用 CSS：
.navbar-brand.flex-truncate {
flex-shrink: 1;
max-width: 140px;
}关键区别：
- 纯流式布局下只需
d-inline-block + max-width - Flex 布局下必须加
flex-shrink: 1，否则浏览器优先保障内容完整显示，宁可撑宽也不截断 - 如果同时用了
justify-content-between，确认.navbar-brand不是最后一个 flex 项——否则它会被强制拉伸，max-width失效
实际中最容易被忽略的是：在折叠/展开切换过程中，JS 动态插入的 DOM（比如用 data-bs-toggle="collapse" 触发后）可能让原有样式丢失，建议所有截断逻辑统一用 class 控制，避免依赖内联 style。
