17370845950

用 插入不被合并的空格，因其为不间断空格、宽度约等于一个英文字符，最常用；面包屑中>前后推荐写为“ > ”，并添加aria-hidden="true"避免读屏器误读。

HTML 里怎么插入不被合并的空格

浏览器默认会把连续多个  、普通空格、制表符、换行都压缩成一个空格。想让“首页 > 分类 > 商品”里的 > 两边有固定宽度空格，不能靠敲空格

  和  、  的区别

常见空格符号不是等宽的，选错会导致面包屑对不齐：

•   是“不间断空格”，宽度约等于一个英文字符，最常用
•   是“二分之一个 em 宽”，通常 ≈ 半个汉字宽，适合微调
•   是“一个 em 宽”，≈ 一个汉字宽，比   更宽更稳
• 别用  （太窄）或纯空格（会被折叠）

面包屑中 > 前后加空格的推荐写法

直接在 HTML 标签里插实体，避免 JS 拼接或 CSS letter-spacing 影响语义：

注意：aria-hidden="true" 是为了不让读屏器重复读“空格大于号空格”，只读文字内容。

CSS 替代方案：用 margin 更可控

如果项目已用 CSS-in-JS 或需要响应式缩放，用样式比硬塞实体更灵活：

.breadcrumb-separator {
  margin: 0 0.5em;
}
/* 对应 HTML */
>

这样空隙随字体缩放，且可统一管理；但要注意 em 基于父元素字体大小，若父级 font-size 动态变化，需配合 rem 或 ch 单位校准。

真正容易被忽略的是：移动端小屏下   可能撑出换行，而 margin 不会——这时候用 CSS 才是真解。