小屏面包屑折叠需兼顾可访问性与响应式：禁用display:none中间项，改用aria-hidden+visually-hidden；css用grid控制布局，伪元素插入省略号；js动态裁剪并同步aria-label、url hash及焦点管理。
小屏下用 display: none 隐藏非首尾项不靠谱
直接对中间的 <li> 元素加 display: none 会导致语义断裂、键盘导航跳步、屏幕阅读器读取异常。面包屑本质是导航链，折叠必须保留逻辑连贯性，不能只靠视觉隐藏。
真正可行的做法是：用 aria-label 标注折叠状态，用 visually-hidden 类隐藏文字但保留可访问性，再配合 CSS 计算剩余可见项数动态插入省略号。
- 优先用
:nth-child(n+2):nth-last-child(n+3)选择中间项（即排除首项和末项） - 给中间项添加
aria-hidden="true"，同时用position: absolute; clip: rect(0 0 0 0);彻底移出可访问流 - 在第二项前伪元素插入
"…"，并设aria-hidden="true"
用 @media + grid 控制小屏布局更可控
传统 flex 布局在折叠时容易因 flex-wrap 或 overflow 行为导致意外换行或截断。改用 display: grid 可精确控制可见项数量与间距。
示例关键片段：
@media (max-width: 480px) {
.breadcrumb {
display: grid;
grid-template-columns: max-content auto max-content;
gap: 0.5em;
}
.breadcrumb li:not(:first-child):not(:last-child) {
display: none;
}
.breadcrumb li:first-child::after {
content: "…";
margin: 0 0.5em;
color: #666;
aria-hidden: "true";
}
}
注意：grid-template-columns 中的 auto 必须对应中间项（已隐藏），否则首尾项会撑满整行；::after 插入位置要严格绑定到 :first-child，避免在末项后重复出现。
JavaScript 动态裁剪需监听 resize 且防抖
纯 CSS 方案无法处理“刚好卡在临界宽度、中间项文字长度差异大”的情况（比如 “Products > Category > Subcategory > Item” 在 481px 显示四段，在 479px 却只能塞下三段）。这时得用 JS 动态计算容器宽度与每项 offsetWidth 总和。
- 不要在
resize回调里直接操作 DOM，用requestAnimationFrame节流 - 遍历
li时从后往前删，避免索引错位；保留首项、末项，中间项逐个检查累计宽度是否超限 - 每次裁剪后更新
aria-label，例如aria-label="Home / … / Contact" - 务必在
window.matchMedia("(max-width: 480px)").addEventListener("change", ...)中同步响应媒体查询变化，避免 JS 与 CSS 媒体断点不一致
折叠后点击省略号展开需兼顾移动端手势与焦点管理
很多方案用 details/summary 实现展开，但在 iOS Safari 上 summary 的点击热区过小，且键盘 Enter 不触发。更稳妥的是用 button + aria-expanded 手动控制。
- 省略号区域必须是
<button type="button">…</button>，禁用默认表单提交行为 - 展开时用
inert属性临时禁用其他中间项的交互，防止多点误触 - 展开后自动将焦点移到第一个被显示的中间项（
el.focus()），并滚动到可视区（el.scrollIntoView({ block: 'nearest' })） - 收起时恢复
aria-expanded="false"并把焦点移回按钮本身，形成完整焦点环
最易被忽略的是：折叠状态必须同步到 URL hash 或 sessionStorage，否则用户旋转屏幕或切后台再回来，展开状态丢失，体验断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
