纯CSS无法可靠实现“首尾保留、中间折叠”的动态面包屑，必须用JS判断层级并插入省略项；flex-wrap单独使用不行，因语义破坏、子项未设flex:0 0 auto易错位、分隔符漂移；正确做法是用flex布局但保留aria-label语义，分隔符用伪元素，容器加flex-wrap和min-width:0；text-overflow:ellipsis仅对单行生效，需white-space:nowrap、明确max-width及末项设flex:1/overflow:hidden/text-overflow:ellipsis/min-width:0；移动端滚动需overflow-x:auto+overflow-y:hidden+white-space:nowrap+-webkit-overflow-scrolling:touch+隐藏滚动条；不同断点策略切换必须JS监听resize并用getBoundingClientRect实时计算。
纯 CSS 无法可靠实现“首尾保留、中间折叠”的动态面包屑——这是最常被误解的点。flex-wrap + text-overflow 只能解决单行省略或换行，但“Home / … / Detail”这种中间省略必须靠 JS 判断层级数并插入省略项。
为什么 flex-wrap: wrap 单独用不行
默认 <ol> 或 <nav> 内部结构不是 Flex 容器，直接加 flex-wrap: wrap 会破坏语义和可访问性；即使改成 display: flex，子项若没设 flex: 0 0 auto，仍可能因内容宽度撑开导致错位或留白异常；分隔符（如 /）若用独立 <span>，在换行时容易脱离基线或位置漂移。
正确做法是：
- 用
display: flex替代原生列表行为，但保留<nav aria-label="breadcrumb">语义 - 每个
<li class="breadcrumb-item">设flex: 0 0 auto - 分隔符改用伪元素生成（如
::before），并设固定宽（width: 16px），避免参与 flex 分配 - 容器加
flex-wrap: wrap，同时确保min-width: 0在需要收缩的项上生效
text-overflow: ellipsis 不生效的三个硬性条件
这组规则只对单行生效，而 flex-wrap: wrap 天然允许多行，二者逻辑冲突。要让它工作，必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 面包屑容器加
white-space: nowrap（禁用换行） - 容器设明确
max-width（不能只靠width: 100%，父级无约束就无效） - 最末项（当前页）单独设
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0
漏掉 min-width: 0 是最常见错误——flex 项默认最小宽度为内容宽度，根本压不进省略范围。
移动端横向滚动的三要素缺一不可
仅加 overflow-x: auto 会导致 iOS 滑动卡顿、焦点丢失甚至无法触发滚动。必须组合使用：
overflow-x: auto; overflow-y: hidden; white-space: nowrap-
-webkit-overflow-scrolling: touch（iOS Safari 必须项） - 隐藏原生滚动条：
::-webkit-scrollbar { display: none; }（Firefox/Edge 不支持，需接受默认样式或降级）
同时确保所有子项（如 <a> 或 <span>）设 display: inline-block 或 flex-shrink: 0，否则文字可能意外换行干扰滚动。
真正复杂的地方在于：不同断点下策略切换不是简单套媒体查询就能搞定的。比如中屏下想保留首尾+省略中间，CSS 没法动态计算“第几个该藏”，只能靠 JS 监听 resize 并调用 getBoundingClientRect() 实时判断可见区域与项数关系——这个逻辑一旦写错，小屏折叠后点击失效、焦点跳转错乱、屏幕阅读器读不出省略项，问题全在看不见的地方。
