仅 flex-wrap: wrap 不够，需用 display: flex 替代原生列表、设 flex: 0 0 auto 和伪元素分隔符；text-overflow 无效因与换行冲突，需 nowrap + max-width + min-width: 0；纯 CSS 无法动态中间折叠；滚动需 -webkit-overflow-scrolling: touch 等三要素。
面包屑在小屏下不换行，只靠 flex-wrap: wrap 就够了吗？
不够。默认 flex-wrap: wrap 确实能让项折行，但面包屑常被写成 <ol></ol> 或内联结构，而 <ol></ol> 默认是块级、有 padding 和 list-style，直接加 flex-wrap 会破坏语义和可访问性，且子项（<li>）若设了 display: inline 或没清除 margin，折行后仍可能错位或留白异常。
正确做法是：用 display: flex 替代原生列表行为，但保留 <nav aria-label="breadcrumb"></nav> 语义；给容器设 flex-wrap: wrap，同时确保每个 <li class="breadcrumb-item"> 是 flex: 0 0 auto（不伸缩、不收缩），分隔符用伪元素生成并设固定宽（如 width: 16px），避免参与 flex 分配。
overflow: hidden + text-overflow: ellipsis 为什么没反应？
因为这组规则只对单行生效，而 flex-wrap: wrap 天然允许多行——二者逻辑冲突。一旦启用了换行，text-overflow 就不会触发。
若你真要省略（比如中屏下强制单行），必须：
- 给面包屑最外层容器加 white-space: nowrap
- 移除或覆盖所有 flex-wrap: wrap（改用 flex-wrap: nowrap）
- 容器设明确 max-width（不能只靠 width: 100%，父级若无约束就无效）
- 最末项（当前页）单独设 flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0
注意：min-width: 0 是关键，否则 flex 项默认最小宽度为内容宽度，根本压不进省略范围。
立即学习“前端免费学习笔记（深入）”；
想“首尾保留、中间折叠”，纯 CSS 能做到吗？
不能可靠做到。CSS 的 text-overflow: ellipsis 只能截尾，:nth-child 配合 display: none 可隐藏中间项，但无法动态判断“哪些该留、哪些该藏”——它依赖固定层级数，而真实面包屑长度是动态的（如 “首页 / 产品 / 分类 / 子类 / 详情” vs “首页 / 关于我们”）。
可行折中方案：
- 小屏（max-width: 480px）下用媒体查询隐藏中间项：.breadcrumb-item:not(:first-child):not(:last-child) { display: none; }
- 同时隐藏对应分隔符：.breadcrumb-item + .breadcrumb-item::before { display: none; }
- 但需注意 IE 不支持多条件否定，若需兼容，得用额外类名（如 .bc-middle）配合 JS 注入
更健壮的做法仍是 JS 监听 resize，用 getBoundingClientRect().width 累加每项宽度，超限时从倒数第二项起移除并插入 <li class="ellipsis">…</li>。
移动端横向滚动体验差，overflow-x: auto 怎么调才不卡？
直接加 overflow-x: auto 在 iOS Safari 上大概率滑不动或卡顿，因为浏览器未启用硬件加速滚动。
必须补全三项：
- overflow-x: auto; overflow-y: hidden;
- -webkit-overflow-scrolling: touch;（iOS 必须，否则 touchmove 事件不触发）
- white-space: nowrap;（防止内部换行干扰滚动轴）
隐藏滚动条可用：::-webkit-scrollbar { display: none; }，但 Firefox/Edge 不支持，别指望全局一致；若要求高，就得用 JS 模拟滚动轨道，或接受其原生样式。
最后提醒：滚动模式和省略模式不可共存。选哪一种，取决于你的用户场景——滚动适合层级深、名称短；省略适合层级浅、名称长，且强调首尾路径语义。
