text-overflow: ellipsis在小屏面包屑中失效，是因为其仅支持单行截断，而响应式面包屑常用flex-wrap: wrap实现换行，二者逻辑冲突；必须强制单行（white-space: nowrap、flex-wrap: nowrap）、设明确max-width、末项加min-width: 0及完整四件套才能生效。
小屏下用 text-overflow: ellipsis 为什么没反应
因为 text-overflow: ellipsis 只对单行生效，而响应式面包屑通常依赖 flex-wrap: wrap 实现换行——二者逻辑冲突。一旦容器允许多行，省略就自动失效。
想让它工作，必须先「锁住单行」：
- 给面包屑最外层容器加
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 没有动态计算“该留哪几级”的能力。:nth-child 或 :not(:first-child):not(:last-child) 只能按固定位置隐藏，但真实面包屑层级数是动态的（如 “首页 / 产品” vs “首页 / 帮助 / 支持 / 工单”）。
立即学习“前端免费学习笔记（深入）”；
可行折中方案（无需 JS）：
- 小屏下（
@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）
aria-current="page" 必须加在哪个元素上
必须加在当前页的 <li> 上，且值只能是 "page"。加在 <a></a> 标签、<ol></ol> 或 <nav></nav> 上都无效。
常见错误：
- 当前页仍写
href，导致点击刷新（当前页不应是可跳转链接） - 用
class="active"或aria-current="true"替代，辅助技术无法识别 - 静态页面靠
window.location.pathname自动推导路径，但 URL 和真实业务层级常不一致——手写结构或构建时注入才可靠
Tailwind 用户最容易忽略的陷阱
Tailwind 下写面包屑，别把分隔符塞进 <a></a> 或 <li> 内部。它必须和导航项同级、同父容器，否则 first:hidden、last:font-medium 全部失效，焦点顺序也会错乱。
正确结构要点：
- 分隔符用独立
<li>，加flex-shrink-0 sm:hidden - 整个
<ol></ol>加flex-wrap和gap，别用whitespace-nowrap - 中文长文本中间项加
max-w-[120px] truncate inline-block，首尾项不加
真正难的是语义与布局的耦合点：比如分隔符用伪元素生成时，aria-hidden="true" 必须加上；用独立元素时，则要确保它不被读屏器误读为可交互项。这些细节不报错，但一上线就被无障碍审计工具标红。
