Flex布局下面包屑不能直接用text-overflow: ellipsis截断，因其仅对单行生效，而flex-wrap: wrap允许多行，需配合white-space: nowrap、overflow: hidden、text-overflow: ellipsis及flex-shrink: 1或min-width: 0才生效。
Flex布局下面包屑不能直接用text-overflow: ellipsis截断？
因为text-overflow: ellipsis只对单行生效，而flex-wrap: wrap天然允许多行——两者逻辑冲突。你加了text-overflow却没反应，大概率是容器或子项仍处于换行状态，或者忘了设white-space: nowrap和overflow: hidden。
真正起效的组合是：
-
white-space: nowrap（禁用换行） -
overflow: hidden（隐藏溢出） -
text-overflow: ellipsis（触发省略） -
display: inline-block或flex-shrink: 1; min-width: 0（让文字可压缩）
注意：若父容器是<ol></ol>，记得加list-none（Tailwind）或list-style: none（原生），否则序号和分隔符会重叠。
为什么flex: 0 0 auto比flex: 1更适合面包屑项？
面包屑每一项都应保持自身宽度，不被拉伸也不被压缩，否则图标、文字缩写、分隔符位置全乱。用flex: 0 0 auto能确保每个<li class="breadcrumb-item">按内容撑开，且不参与 flex 分配。
立即学习“前端免费学习笔记（深入）”；
常见错误是给所有项设flex: 1，结果中间项被压扁，当前页文字被截断，甚至分隔符错位到下一行。
正确做法：
- 分隔符（如
/）单独作为<li>，加flex-shrink: 0和固定宽（如width: 16px） - 首项（首页）和末项（当前页）不设
truncate，避免关键信息丢失 - 中间项统一加
max-w-[120px] truncate inline-block（Tailwind）或等效 CSS
小屏下“首尾保留、中间隐藏”必须用JS吗？
纯 CSS 可以做简单策略切换，但无法动态判断“哪些该藏”，只能靠媒体查询硬编码：
@media (max-width: 480px) { .breadcrumb-item:not(:first-child):not(:last-child) { display: none; } }- 对应分隔符也要隐藏：
.breadcrumb-item + .breadcrumb-item::before { display: none; } - IE 不支持多条件否定伪类，需 JS 注入
bc-middle类作兼容 fallback
更可靠的做法仍是监听resize，用getBoundingClientRect()逐项测量总宽，再从中间开始移除节点——尤其当路径深度超过 5 级时，CSS 静态规则极易漏判。
分隔符用伪元素::before还是独立<li>？
必须用独立<li>。伪元素插入的/无法被键盘焦点跳过，屏幕阅读器读不出层级关系，且在flex-wrap下容易脱离基线、换行错位。
正确结构示例：
<ol class="flex flex-wrap items-center gap-1"> <li><a href="/">首页</a></li> <li class="text-gray-400 flex-shrink-0">/</li> <li><a href="/docs">文档</a></li> <li class="text-gray-400 flex-shrink-0">/</li> <li class="font-medium">配置指南</li> </ol>
所有分隔符与内容同级，语义完整，flex-shrink-0防压缩，sm:hidden可控制响应式显隐——这才是可访问、可维护、真响应的写法。
