在 bootstrap 5 导航栏（navbar）中，对无固定宽度的动态文本（如 api 返回的长标题）实现响应式截断（ellipsis），需突破 `text-truncate` 对显式 `max-width` 的依赖，核心是利用 css grid 的内在收缩特性配合标准截断属性。
在 Bootstrap 5 中，.text-truncate 工具类本身仅提供 white-space: nowrap; overflow: hidden; text-overflow: ellipsis 三要素，但它强制要求父容器具有明确的宽度限制（如 max-width 或 width），否则无法触发截断。而在 Navbar 场景下，导航项（.nav-item）通常处于弹性布局（Flexbox）中，其子元素（如 .nav-link）默认不收缩，导致即使添加 .text-truncate 也无效——尤其当文本来自不可控长度的后端 API 时，硬编码 max-width 既不健壮也不响应式。
✅ 正确解法：用 CSS Grid 替代 Flexbox 布局逻辑，赋予容器“内在最小宽度收缩能力”（intrinsic minimum width collapse）。Grid 容器天然支持 min-width: 0 的严格收缩行为，无需预设像素宽度即可让子内容受 text-overflow: ellipsis 约束。
✅ 推荐实现（简洁、兼容、无侵入）
/* 关键：用 grid 实现自适应收缩容器 */
.nav-link-wrapper {
display: grid;
min-width: 0; /* 必须！允许内容收缩到零宽以触发截断 */
/* 可选：微调内边距或边框 */
padding: 0.375rem 0; /* 匹配原 nav-link 垂直间距 */
}? 原理说明： display: grid 使容器获得“块级网格格式化上下文”，其子元素（.nav-link）在无显式尺寸时会自然收缩； min-width: 0 是关键开关——它覆盖浏览器默认的 min-width: auto（即“不小于内容宽度”），允许容器压缩至足够窄，从而激活 text-overflow: ellipsis； .d-block 确保 标签为块级，避免行内元素截断失效； 无需额外 wrapper 层级，语义清晰，与 Bootstrap 原生结构兼容。
⚠️ 注意事项与避坑指南
- 不要嵌套多层 Flex 容器：如问题中尝试的 .flex-parent-* 嵌套方案，因 Flex 容器默认 min-width: auto，即使加 min-width: 0 也常被祖先 Flex 项继承策略干扰，稳定性差；
- 避免滥用 width: 100% 或 flex: 1：它们可能撑满可用空间，反而阻止截断，Grid 方案更可控；
- 移动端兼容性：该方案在所有现代浏览器（Chrome/Firefox/Safari/Edge ≥ v79）及 iOS Safari ≥ 14.5 中完全支持，无需 Polyfill；
- 与下拉菜单共存：若截断项位于 .dropdown 内，确保 .dropdown-menu 不影响父 .nav-item 的布局流（推荐将 .nav-link-wrapper 直接置于 .nav-item 下，而非 .dropdown-toggle 内）；
- 辅助功能保留：text-truncate 不影响屏幕阅读器读取完整文本，语义无障碍。
✅ 最终验证效果
该方案可完美适配：
- 桌面端：Navbar 展开时，长文本在剩余空间内自动省略；
- 移动端：Navbar 折叠后，.navbar-collapse 内部仍保持截断；
- 动态内容：API 返回任意长度字符串（10 字符 or 500 字符）均稳定生效；
- 响应式缩放：浏览器窗口拖拽、设备横竖屏切换时实时重绘，无闪烁或错位。
通过一行 display: grid + min-width: 0，即可优雅解决 Bootstrap 5 Navbar 中“未知宽度文本截断”这一高频痛点，代码轻量、逻辑清晰、维护成本趋近于零。
