要让面包屑过长时显示省略号，需用flexbox布局：父容器设display: flex和overflow: hidden，首项flex: 0 0 auto，分隔符固定宽，中间项flex: 0 1 120px，末项flex: 1 1 0且min-width: 0、white-space: nowrap、overflow: hidden、text-overflow: ellipsis。
面包屑过长时文字被截断但没省略号？
默认 white-space: nowrap + overflow: hidden 只会砍掉内容，不显示 …。要让溢出项变成省略号，必须配合 text-overflow: ellipsis，但它只对单行生效，而面包屑是多节点 inline 元素。解决方案是把整个面包屑容器设为 display: flex，再让最后一个可见项（通常是当前页）用 flex: 1 占满剩余空间，并在其内部做单行省略。
关键点：
- 父容器加
display: flex和overflow: hidden - 每个
<li>设white-space: nowrap - 最后一个
<li>（当前页）设flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 中间分隔符（如
/）用伪元素或独立<li>，宽度固定，不参与 flex 分配
Flexbox 下如何让中间项自动收缩、首尾项保持完整？
不能直接给所有 <li> 设 flex: 0 1 auto —— 这会导致路径中较长的中间项（比如“用户管理与权限配置”）把末项挤出视口，且不触发省略。正确做法是显式控制弹性行为：
- 首项（首页）设
flex: 0 0 auto，禁止收缩 - 分隔符（
/）设固定宽高，例如width: 16px，flex: 0 0 16px - 中间路径项（非首非尾）设
flex: 0 1 120px（最小宽度可调），允许压缩但有底线 - 末项（当前页）设
flex: 1 1 0+min-width: 0，强制它吸收所有剩余空间并触发省略
注意：min-width: 0 是关键，否则 flex 项默认有 min-width: auto，会阻止压缩到小于内容宽度。
移动端小屏下想隐藏中间项、只留首/尾+省略号？
纯 CSS 实现需要借助 :nth-child 和媒体查询，但更可靠的方式是用 display: none 配合类名控制。Flexbox 本身不提供“折叠中间节点”的内置逻辑，所以得靠结构配合：
- 给每个中间路径项（除第一个和最后一个）加类名
bc-middle - 在小屏断点下写
@media (max-width: 480px) { .bc-middle { display: none; } } - 同时确保分隔符也响应式隐藏（比如给
.bc-separator:nth-of-type(n+2)加display: none），避免残留多个/ - 如果要用纯 CSS 不改 HTML，可用
li:not(:first-child):not(:last-child)，但注意 IE 不支持多条件否定
为什么用了 flex 仍出现换行或布局错乱？
常见原因不是 Flex 设置错误，而是祖先元素干扰：
-
<ol></ol>或<nav></nav>默认有padding-left，导致整体偏移，需重置为padding: 0 - 父容器未设
width: 100%或含max-width，flex 容器无法正确计算可用空间 - 字体加载延迟造成布局抖动，建议对
font-display: swap或预设line-height和height - 某些 UI 框架（如 Bootstrap）会给
ol li设list-style: none但漏掉margin，结果项之间有意外间距
最易忽略的是：当面包屑嵌在 position: relative 的卡片内，而卡片又用了 transform（如缩放适配 DPR），会触发新的层叠上下文和尺寸计算偏差，此时应检查是否意外触发了 flex 容器的 contain: layout 行为（即使没显式写）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
