关键不是加符号，而是用white-space: nowrap包裹整个“上项/下项”片段；伪元素生成分隔符更语义干净；svg需设viewbox并用vertical-align: -0.125em对齐；隐藏分隔符应避免display: none，改用clip-path或aria-hidden="true"保障可访问性。
用 / 或 > 作为分隔符时，如何避免文字换行错位？
直接在 HTML 中写 <span>/</span> 容易被浏览器当成普通文本，在窄屏或小字体下折行，导致分隔符孤零零挂在上/下行。关键不是“怎么加符号”，而是“怎么锁住它和前后文字的相对位置”。
实操建议：
- 给分隔符外层加
white-space: nowrap，包裹整个“上一项 / 下一项”片段，而不是只包符号本身 - 用
::before或::after伪元素生成分隔符（更语义干净），并设content: "/"+display: inline-block - 避免对分隔符单独设
font-size或vertical-align，容易破坏基线对齐；统一用line-height控制垂直居中
使用 SVG 图标做分隔符时，怎样保证缩放不模糊、对齐不偏移？
SVG 比字体图标或 PNG 更适合做分隔符，但默认尺寸和坐标系常导致上下留白或左右错位。核心是重置 SVG 的 viewBox 和内联样式。
实操建议：
- SVG 必须带
viewBox="0 0 24 24"（数值可调，但必须有），且去掉width/height属性，让 CSS 控制尺寸 - 在 CSS 中设
svg { width: 1em; height: 1em; vertical-align: -0.125em; }——-0.125em是多数字体中斜杠类符号的常用基线补偿值 - 不要用
background-image引入 SVG，会丢失currentColor响应能力；直接内联或用<img src="data:...">
border-left 或 border-right 能否替代分隔符？适用场景和限制是什么？
能，而且在纯色背景、固定间距场景下最轻量。但它不是“分隔符”，而是“视觉区隔”，语义和键盘导航支持弱于真实文本或图标。
实操建议：
- 仅用于内部管理后台等对无障碍要求低的场景；对外产品慎用
- 若用
border-left，记得给首项加border-left: none，否则多出一根线 - 边框颜色别硬写
#ccc，改用color: currentColor+border-color: currentColor，方便主题切换 - 边框宽度超过
1px时，注意和文字行高匹配，否则看起来像下沉或上浮
响应式断点下，分隔符要不要隐藏？隐藏逻辑怎么写才不伤可访问性？
隐藏分隔符本身没问题，但不能用 display: none 或 visibility: hidden，否则屏幕阅读器也会跳过，破坏导航结构。
实操建议：
- 用
clip-path: inset(50%)或position: absolute; clip: rect(1px, 1px, 1px, 1px);实现视觉隐藏但保留可读性 - 更推荐保留分隔符，只缩小小屏幕的
font-size和margin，比如从16px降到14px，比完全移除更符合用户心智模型 - 如果真要移除，确保用
aria-hidden="true"显式声明，并确认父级nav元素有正确aria-label
真正难的不是画出那个“/”，而是让它的位置、尺寸、语义、缩放、读屏表现全部稳定——尤其当面包屑嵌在动态渲染的组件里，或被第三方 UI 库包裹时，vertical-align 和 line-height 的微小偏差会立刻暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
