flex-wrap: wrap 但文字挤成一团，根本原因是子项未设 flex-shrink: 1 和 min-width: 0，导致无法压缩；分隔符须用 .breadcrumb-item:not(:last-child)::after 插入并加 shrink-0 和 margin 控制，不可用 content: /（缺引号会失效）；中文路径需配合 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及明确宽度约束。
flex-wrap: wrap 但文字还是挤成一团？
默认给 .breadcrumb 容器加 display: flex 和 flex-wrap: wrap，看似能折行，实际常出现项错位、分隔符飞到下一行开头、文字贴边甚至重叠——根本原因是子项（.breadcrumb-item）没配对控制收缩行为。
- 子项必须显式设
flex-shrink: 1 + min-width: 0，否则浏览器按内容宽度兜底，拒绝压缩，哪怕容器窄得只剩 20px，它也硬撑着不缩
- 分隔符（如
/）若用真实 <span></span> 或未加 flex-shrink: 0 的伪元素，会被 Flex 当作普通子项参与分配，小屏下一压就换行或基线偏移
- 别在容器上设
white-space: nowrap，它和 flex-wrap: wrap 冲突，直接废掉换行能力
分隔符在折行时跑偏或断开？
分隔符不是装饰，是布局关键节点。用 .breadcrumb-item:not(:last-child)::after 插入最稳妥，但必须补上：
-
content: "/"（注意引号不能漏，content: / 会静默失效）
-
flex-shrink: 0（Tailwind 中对应 shrink-0）
-
margin-inline-start: 0.5em 替代固定 width，避免干扰 Flex 分配
flex-shrink: 1 + min-width: 0，否则浏览器按内容宽度兜底，拒绝压缩，哪怕容器窄得只剩 20px，它也硬撑着不缩/）若用真实 <span></span> 或未加 flex-shrink: 0 的伪元素，会被 Flex 当作普通子项参与分配，小屏下一压就换行或基线偏移white-space: nowrap，它和 flex-wrap: wrap 冲突，直接废掉换行能力.breadcrumb-item:not(:last-child)::after 插入最稳妥，但必须补上：
-
content: "/"（注意引号不能漏，content: /会静默失效） -
flex-shrink: 0（Tailwind 中对应shrink-0） -
margin-inline-start: 0.5em替代固定width，避免干扰 Flex 分配
如果用独立 <li class="separator">/</li>，同样要加 shrink-0，否则它可能被压缩成一个像素点，或被挤到第二行最左端。
中文路径一长就溢出或截断失败？
中文无空格，text-overflow: ellipsis 在 Flex 下极易失效，尤其当父容器没明确宽度约束时。
- 纯省略模式（中屏单行）：需同时满足
white-space: nowrap + overflow: hidden + text-overflow: ellipsis + min-width: 0（对中间项）
- 小屏横向滚动更可靠：容器加
overflow-x: auto + white-space: nowrap + -webkit-overflow-scrolling: touch（iOS Safari 必须）
- 中文项建议加
max-w-[120px] + truncate（Tailwind）或 inline-block + overflow: hidden（原生 CSS），首尾项保留完整文本
sticky 面包屑在移动端不粘？
这不是样式问题，是滚动上下文错了。iOS Safari 对 body 上的 position: sticky 支持极差，且一旦父容器有 transform、opacity 或 <code>filter，就会隐式创建新层叠上下文，让 sticky 失效。
- 把滚动收归内层容器：给面包屑直接父元素设
max-height: 100vh + overflow-y: auto
- 面包屑自身设
position: sticky + top: 44px（若顶部有状态栏/导航栏）
- 检查该父容器是否意外带了
will-change 或 filter ——这些属性肉眼不可见，但足以破坏 sticky 行为
white-space: nowrap + overflow: hidden + text-overflow: ellipsis + min-width: 0（对中间项）overflow-x: auto + white-space: nowrap + -webkit-overflow-scrolling: touch（iOS Safari 必须）max-w-[120px] + truncate（Tailwind）或 inline-block + overflow: hidden（原生 CSS），首尾项保留完整文本body 上的 position: sticky 支持极差，且一旦父容器有 transform、opacity 或 <code>filter，就会隐式创建新层叠上下文，让 sticky 失效。
- 把滚动收归内层容器：给面包屑直接父元素设
max-height: 100vh+overflow-y: auto - 面包屑自身设
position: sticky+top: 44px（若顶部有状态栏/导航栏） - 检查该父容器是否意外带了
will-change或filter——这些属性肉眼不可见，但足以破坏 sticky 行为
真正容易被忽略的，是分隔符伪元素的 content 引号和父容器的层叠上下文控制；这两处一错，整个响应式逻辑就从根上失效。
