面包屑过长时文字被截断或溢出容器，根源是Bootstrap默认.breadcrumb设white-space: nowrap且.breadcrumb-item缺min-width: 0，导致flex项拒绝收缩换行；解决方案是覆盖为white-space: normal、min-width: 0，并确保分隔符伪元素不单独换行。
面包屑过长时文字被截断或溢出容器
Bootstrap 默认的 .breadcrumb 使用 flex 布局且设置了 white-space: nowrap，导致长文本或中文路径下内容直接撑破容器、换行失效。这不是 Bug，是设计使然——它默认假设路径项较短。
解决思路很直接：覆盖掉影响换行的关键样式，但要注意保留分隔符（如 / 或箭头）的语义和视觉连贯性。
- 必须重置
white-space: normal（否则flex-wrap无效） - 给
.breadcrumb-item加flex: 1 1 auto或显式设min-width: 0，防止 flex 项强行撑宽 - 避免直接改
.breadcrumb的display，否则会破坏 Bootstrap 的响应式间距逻辑
用 CSS 覆盖默认行为的最小改动方案
在项目自定义 CSS 文件中追加以下规则（注意优先级要高于 Bootstrap 原始样式，比如放在引入 Bootstrap CSS 之后）：
.breadcrumb {
flex-wrap: wrap;
}
.breadcrumb-item {
white-space: normal;
min-width: 0;
}
.breadcrumb-item + .breadcrumb-item::before {
white-space: nowrap; /* 确保分隔符不单独换行 */
}如果用了 Bootstrap 5.3+ 的 data-bs-skip-propagation 或自定义分隔符，还要检查是否被 JS 动态注入了 white-space: nowrap —— 此时需用 !important 强制覆盖，但仅限于 ::before 伪元素中的该属性。
立即学习“前端免费学习笔记（深入）”；
中文路径下换行位置不理想怎么办
浏览器对中文换行默认只在空格、标点（如 /、»）处断行，但路径中若全是连续汉字（如 用户管理/角色权限配置/数据导出设置），可能整段卡在一行。这时不能靠 flex 解决，得干预文本流本身：
- 给
.breadcrumb-item a或文本容器加word-break: break-word（允许在任意字符间断行） - 更温和的选择是
overflow-wrap: break-word，它只在必要时才打断单词 - 慎用
hyphens: auto，中文不支持自动连字符，反而可能引发渲染异常
示例：
.breadcrumb-item a {
word-break: break-word;
}移动端小屏下换行后间距错乱
Bootstrap 的 .breadcrumb 在响应式断点里用了 gap 控制项间距，但换行后 flex 项变成多行，gap 会在行与行之间也生效，导致垂直间距过大。
临时修复方式是用媒体查询降级为 padding 控制：
@media (max-width: 768px) {
.breadcrumb {
gap: 0;
}
.breadcrumb-item:not(:last-child) {
margin-right: 0.5rem;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/\00a0"; /* 用不换行空格替代纯 /，防止单独换行 */
}
}真正麻烦的是当项目同时用了 RTL（右向左）语言或自定义分隔符图标（SVG/字体图标）时，::before 的换行控制会变得更脆弱——这时候建议把分隔符从伪元素移到 HTML 内联，用 <span class="breadcrumb-separator">/</span> 显式控制。
