html默认折叠连续空白字符，导致面包屑分隔符前后空格不显示；应使用 替代普通空格，或用css伪元素::before生成带不可折叠空隙的分隔符。
面包屑中空格符号被折叠的默认行为
HTML 会把连续的空白字符（包括空格、制表符、换行）压缩成一个空格，再渲染时还会把首尾空格裁掉。所以如果你写 > 或 / 做分隔符，又在前后加了空格，比如 <span>首页</span> <span>></span> <span>分类</span>，这些空格大概率不会显示出来——不是代码错了，是浏览器按规范处理了。
用 替代普通空格最直接
这是最常用也最稳妥的做法：把分隔符前后的空格换成 （不换行空格）。它不会被折叠，宽度和普通空格一致，语义上也清晰。
<span>首页</span> <span>></span> <span>分类</span>- 如果用
/分隔，写成<span>首页</span> / <span>分类</span> - 注意：
\u00a0或直接粘贴不换行空格（后者在某些编辑器或 CMS 中可能被自动清理）
CSS 的 white-space 要慎用
有人会想用 white-space: pre 或 pre-wrap 强制保留空格，但这容易破坏面包屑的流式布局：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 整个面包屑容器设
white-space: pre后，换行符也会被保留，可能让一行变多行 - 如果面包屑文字过长，
pre不会自动折行，容易撑破容器 - 仅对分隔符元素设样式意义不大，因为分隔符本身没空格可保留
- 真正需要的是“保留特定空格”，不是“保留所有空白”，所以优先选
用伪元素生成分隔符更干净
如果项目已用 CSS 预处理器或支持现代 CSS，推荐把分隔符完全交给 ::after，HTML 里只留语义化结构：
.breadcrumb > * + *::before {
content: "/\A0";
padding: 0 0.5em;
}
说明：
-
\A0是十六进制的 - 用
+选择器避免给第一个元素加前缀，语义和结构都更清晰 - 所有样式集中管理，后续要换成分隔符（比如改成
>）只需改一处 - 注意：IE8 不支持
::after在非块级元素上生效，如需兼容，得补display: inline-block
最常被忽略的是：分隔符空格问题往往和字体、行高、内边距混在一起表现。先确认是不是纯空格折叠，再动手改；否则可能调了半天 CSS，结果发现只是父容器 font-size: 0 把所有内联内容缩没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
