Breadcrumb文字撑破容器的根源是Bootstrap未给.breadcrumb-item设置换行控制，导致超长URL等连续字符串无法折行；解决方案是添加word-break: break-word，并注意分隔符对齐与响应式截断的细节处理。
为什么 breadcrumb 文字撑破容器
不是文字太长，而是 Bootstrap 默认没给 .breadcrumb-item 设换行控制。遇到超长单词（如 API 路径 /api/v2/organizations/1234567890abcdef）或连续无空格字符串时，浏览器拒绝折行，直接横向撑开整个导航条。
-
.breadcrumb容器本身是flex布局，但子项.breadcrumb-item没设min-width: 0，弹性项会“宁可溢出也不收缩” - Bootstrap 不提供
text-truncate的多行变体，单行省略（text-overflow: ellipsis）又要求white-space: nowrap，和面包屑天然需要换行的语义冲突 - 自定义分隔符（比如 SVG 图标）若未设
vertical-align: middle或尺寸过大，也会在小屏下顶破行高，造成视觉溢出
加 word-break: break-word 是最简解法
不用改 HTML 结构，也不依赖 JS，纯 CSS 修复，所有现代浏览器支持。
- 直接在
.breadcrumb-item上加该样式：word-break: break-word—— 它允许在任意字符间断行，对 URL、UUID、长文件名最有效 - 若要兼顾中英文混排的阅读体验，可叠加
overflow-wrap: break-word（二者行为一致，word-break兼容性略好） - 避免用
break-all：它会在字母间强行断开（如 “Bootstrap” → “Boo-tstrap”），破坏可读性
响应式截断需手写媒体查询
Bootstrap 不提供 text-truncate 的断点版本，比如「桌面端显示完整路径，移动端只留最后一级」。必须自己补：
- 给关键项加 class，例如
<li class="breadcrumb-item truncate-on-mobile"> - 写 CSS：
@media (max-width: 768px) { .truncate-on-mobile { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } } - 注意：
max-width必须设具体值（不能用%），否则text-overflow不触发；同时确保父容器没设flex-wrap: wrap，否则会折成两行失效
分隔符引发的溢出常被忽略
用 CSS 变量 --bs-breadcrumb-divider 替换分隔符时，图标或符号容易错位、截断，尤其在小屏折叠状态：
- SVG 分隔符必须设
width和height（推荐1em），并加vertical-align: middle - 避免用
font-size缩小分隔符文字——它会改变基线，导致上下文字不对齐；改用transform: scale(0.8)更稳 - 如果用了自定义 Unicode 符号（如
"›"），检查是否被字体 fallback 截断：某些系统字体不支持该字符，会渲染成方块并撑宽
overflow-hidden 都压不住溢出。 
