用 flex + min-width + overflow-x: auto 可实现无 JS 响应式面包屑：容器设 display: flex，子项 flex-shrink: 0，分隔符用 ::after 伪元素并加 flex-shrink: 0，iOS 需 -webkit-overflow-scrolling: touch 保障滑动体验。
直接用 flex + min-width + overflow-x: auto 就能做出真正可用的响应式面包屑，不需要 JS 介入，也不依赖框架。关键在于别让文字换行破坏层级结构，同时保证窄屏下可横向滑动而非折叠隐藏。
为什么不能只靠 white-space: nowrap + overflow: hidden
这是最常踩的坑：加了 white-space: nowrap 后，小屏下文字被截断、省略号（text-overflow: ellipsis）只出现在末尾，用户根本看不到“首页 > 分类 > 子类 > 当前页”里的中间层级，导航失效。
真正要的是——保留全部节点、允许横向滚动、视觉上仍保持箭头分隔的线性结构。
- 必须给容器设
display: flex，让子项不折行且自动排列 - 每个
<li>或<span>节点需设flex-shrink: 0，否则小屏下会被压缩到看不见文字 - 容器本身加
overflow-x: auto和scrollbar-width: none（Firefox）或::-webkit-scrollbar { display: none }（Chrome/Safari）隐藏滚动条但保留滚动能力
flex 布局中如何控制分隔符（如 / 或 >）不单独折行
分隔符如果写成独立元素（比如每个 <li> 后跟一个 <span class="sep">></span>），在 flex 容器里它可能被挤到下一行，破坏语义和视觉流。
立即学习“前端免费学习笔记（深入）”；
更稳的做法是把分隔符作为伪元素注入，不占 DOM 位置：
.breadcrumb-item:not(:last-child)::after {
content: ">";
margin: 0 0.5em;
color: #999;
flex-shrink: 0;
}
这样分隔符和文字绑定在一起，不会被 flex 拆开，也无需额外 HTML。
- 务必给
::after加flex-shrink: 0，否则它可能被压缩变形 - 避免用
- 如果要用 SVG 箭头，建议内联
svg并设width: 1em; height: 1em; flex-shrink: 0
移动端触摸滚动体验优化要点
纯 CSS 横向滚动在 iOS 上默认不支持“轻扫即滚”，用户得用力拖拽才能动，体验差。
只需加一行 -webkit-overflow-scrolling: touch（仅 Safari 有效），就能启用原生级惯性滚动：
.breadcrumb {
-webkit-overflow-scrolling: touch;
overflow-x: auto;
}
注意：这个属性已废弃但仍是 iOS 必选项；现代方案可配合 scroll-behavior: smooth 提升动画感，但不要对 breadcrumb 容器设 scroll-snap-type，会强制对齐节点，反而干扰自由滑动。
- 别给 breadcrumb 容器设固定高度，否则在部分安卓浏览器中滚动会失灵
- 测试时真机连 Safari 开发者工具，模拟 iPhone SE 宽度（375px），看是否能顺滑拖动并停在任意位置
- 如果项目用 Tailwind，对应类是
scroll-smooth+touch-pan-x（需自定义插件支持）
真正难的不是写出能滚动的面包屑，而是让每个环节都「不抢焦点、不截信息、不卡手势」——尤其是分隔符绑定方式和 iOS 的 -webkit-overflow-scrolling，漏掉任何一个，用户在小屏上就容易迷路。
