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

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

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

  和  、  的区别

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

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

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

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

<nav aria-label="面包屑">
  <ol>
    <li><a href="/">首页</a></li>
    <li><span aria-hidden="true"> > </span></li>
    <li><a href="/category">分类</a></li>
    <li><span aria-hidden="true"> > </span></li>
    <li>商品</li>
  </ol>
</nav>

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

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

立即学习“前端免费学习笔记（深入）”；

CSS 替代方案：用 margin 更可控

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

.breadcrumb-separator {
  margin: 0 0.5em;
}
/* 对应 HTML */
<span class="breadcrumb-separator" aria-hidden="true">></span>

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

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