面包屑导航应使用语义化 <nav><ol> 结构，<li> 包裹链接或当前页，分隔符用独立 <li class="sm:hidden">/</li> 实现响应式隐藏；需加 list-none 移除默认序号，中间项设 max-w-[120px] truncate inline-block 控制省略，首尾项不截断。
面包屑导航的 HTML 结构怎么写才利于 Tailwind 响应式控制
直接用 <nav> 包裹 <ol>，每个 <li> 代表一级路径，<a> 或 <span> 表示可点击项或当前页。不推荐用 <div> + Flex 模拟列表语义——这会让屏幕阅读器失效，也增加响应式断点调试负担。
关键点在于：语义化结构能天然配合 Tailwind 的 first:hidden、last:font-medium 等伪类工具，且在移动端折叠时更可控。
-
<ol class="flex flex-wrap items-center gap-1 sm:gap-2">——gap在小屏用1防止拥挤，大屏放宽到2 - 每个
<li>加flex-shrink-0，避免文字被压缩折行（尤其中文路径） - 分隔符统一用
<span class="text-gray-400">/</span>，不依赖伪元素，方便后续替换成 SVG 或图标字体
如何让分隔符在移动端自动隐藏又不破坏语义
不能靠 ::before 或 ::after 插入 /，否则响应式隐藏时会丢失语义顺序，且无法被键盘焦点跳过。正确做法是把分隔符作为独立 <li>，用 sm:hidden 控制显示：
<ol class="flex flex-wrap items-center gap-1 sm:gap-2"> <li><a href="/" class="text-blue-600 hover:underline">首页</a></li> <li class="sm:hidden text-gray-400">/</li> <li><a href="/docs" class="text-blue-600 hover:underline">文档</a></li> <li class="sm:hidden text-gray-400">/</li> <li class="font-medium text-gray-900">配置指南</li> </ol>
这样在小屏下分隔符消失，列表自然连成一行；在桌面端保留斜杠，视觉清晰。注意：所有分隔符 <li> 必须加 flex-shrink-0，否则可能被 Tailwind 的 flex-wrap 挤进下一行。
立即学习“前端免费学习笔记（深入）”；
列表标记（bullets）和分隔符混用时的样式冲突怎么解
Tailwind 默认不重置 <ol> 的 list-style，如果同时用数字序号和手动分隔符，会出现「1. / 2. / 3.」这种冗余效果。必须显式关闭原生标记：
- 加
list-none到<ol>，彻底移除默认序号 - 若需视觉序号（如「1 → 2 → 3」），改用
before:content-[counter(step)]配合 CSS counter，而不是依赖 HTML 序号 - 避免对
<li>单独设list-disc或list-decimal—— 这会和分隔符叠加，造成定位错乱 - 移动端若想用箭头替代斜杠，可换
sm:hidden为md:hidden，并在小屏用before:content-['→']覆盖分隔符
响应式截断与省略（ellipsis）的边界条件
当路径层级多、文字长时，直接加 truncate 会切掉末尾文字，但用户需要看到的是“当前页”而非“首页”。所以截断必须作用在中间项，且保留首尾：
- 给中间的
<a>加max-w-[120px] truncate sm:max-w-none，小屏限制宽度并省略，桌面屏放开 - 首项（首页）和末项（当前页）始终不加
truncate，确保关键信息可见 - 避免对整个
<ol>设overflow-hidden—— 这会导致分隔符被裁剪，尤其在 flex wrap 场景下 - 真要支持超长路径，建议用
data-tooltip+ JS 展示完整文本，比纯 CSS 截断更可靠
最易被忽略的是：Tailwind 的 truncate 依赖 block 或 inline-block，而 <a> 默认是 inline，需额外加 inline-block 才生效。这点不试一次根本想不到。
