text-truncate 无效是因为 nav-link 缺少宽度约束且 display 不适配；需在内部用 d-inline-block + max-width 的 span 包裹文本，并针对下拉菜单、响应式、图标、Tooltip 等场景分别处理。
导航栏菜单项加 text-truncate 为什么没反应
因为 .nav-link 默认是 display: inline-flex（Bootstrap 5）或 display: block（Bootstrap 4），但父容器（如 .navbar-nav 或 .nav）没有设宽度约束，overflow: hidden 就无从生效——省略号根本不会触发。
常见错误现象：文字被截断但没省略号；或者菜单项撑宽整个导航栏；又或者加了 text-truncate 后文字直接换行、高度异常升高。
-
text-truncate必须作用在有明确width或max-width的块级元素上，不能只靠类本身 - 别把
text-truncate直接加在<a class="nav-link">上就完事，它需要“容器感” - 如果菜单项在响应式折叠菜单（
.dropdown-menu）里，还要额外处理min-width干扰
nav-link 内部包一层 span 才可靠
最稳的做法是不依赖 nav-link 自身样式，而是在其内部插入一个带约束的内联容器。这样既避开 Bootstrap 对 a 元素的 display 覆盖，又能精准控制截断行为。
示例写法：
<a class="nav-link" href="#"> <span class="d-inline-block text-truncate" style="max-width: 120px;">这是一个非常非常长的导航菜单项名称</span> </a>
-
d-inline-block确保span可设宽高，且不破坏行内布局 -
max-width比width更安全，尤其在小屏下能自适应收缩 - 避免用
white-space: nowrap影响整个nav-link，只让它作用于内层span - 如果菜单项含图标（如
<i class="bi bi-house"></i>），把图标和span并列放，别塞进span里，否则图标也会被截断
响应式场景下怎么防溢出
导航栏在移动端常被折叠进汉堡菜单，此时 .dropdown-menu 默认有 min-width: 10rem，会强行撑开过长文字，导致省略号失效或出现横向滚动条。
- 对折叠菜单里的菜单项，加覆盖样式：
.dropdown-menu .nav-link .text-truncate { max-width: calc(100vw - 48px); }（减去左右 padding） - 别用
w-100类——它会让span撑满父容器，失去截断意义 - 若项目用的是 Bootstrap 5.3+，可配合
text-break类处理中英文混排时的断行尴尬，但注意它和text-truncate互斥，二者只能选一 - 测试真机：iOS Safari 对
text-overflow: ellipsis在 flex 容器中的兼容性较弱，务必在span上显式声明overflow: hidden
鼠标悬停显示完整内容，别只靠 title
title 属性延迟高、移动端不触发、中文标点易被截断（尤其遇到 <、{、 ），不适合生产环境。
- 优先用 Bootstrap 自带的 Tooltip：给
span加data-bs-toggle="tooltip"和data-bs-title，再执行new bootstrap.Tooltip(document.querySelector('.text-truncate')) - 初始化要等 DOM 渲染完成，别在
DOMContentLoaded之前调用 - 如果菜单项动态生成（如 Vue/React 渲染），改用事件委托绑定到
.navbar-nav，监听mouseenter动态创建 tooltip 实例 - 性能提醒：别对每个
.nav-link都初始化 tooltip，只对scrollWidth > clientWidth的项启用，减少不必要的 DOM 操作
真正卡住人的地方不是 CSS 写不对，而是忘了 nav-link 不是普通 div——它自带 display、padding、transition，所有截断逻辑必须嵌套在它的盒模型内部，而不是试图覆盖它。
