使用 CSS 内容添加 HTML 实体

将十六进制代码用于不间断空格。像这样的东西：

.breadcrumbs a:before {
  content: '>\00a0';
}

您必须使用转义的 unicode ：

喜欢

.breadcrumbs a:before {
  content: '\0000a0';
}

更新：PointedEars 提到，在所有 css 情况下
，正确的替身意味着空格是十六进制字符串的终止符，并被转义序列吸收。他进一步指出了这种权威性的描述，这听起来像是我在下面描述和修复的问题的一个很好的解决方案。 '\a0 '

您需要做的是使用转义的 unicode。尽管你被告知在CSS中不是一个完美的替身;所以试试：\00a0 

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

具体用作 . 如果您尝试，正如 mathieu 和 millikin 所建议的那样：\0000a0 

content:'No\00a0Break'   /* becomes No਋reak */

它将 B 带入十六进制转义字符。0-9a-fA-F 也会发生同样的情况。

有一种方法可以粘贴一个 - 打开 CharMap 并复制字符 160。但是，在这种情况下，我可能会用填充将其隔开，如下所示：nbsp

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

不过，您可能需要设置面包屑或其他东西。display:inline-block

在 CSS 中，您需要使用 Unicode 转义序列来代替 HTML 实体。这是基于字符的十六进制值。

我发现将符号转换为十六进制等价物的最简单方法是，例如从 ▾ （） 到 是使用 Microsoft 计算器 =）▾\25BE

是的。启用程序员模式，打开十进制系统，输入 ，然后切换到十六进制，你会得到 .然后只需在开头添加一个反斜杠即可。966225BE\

CSS 不是 HTML。 是 HTML 中的命名字符引用;等效于十进制数字字符引用。160 是 Unicode（或 UCS-2;请参阅 HTML 4.01 规范）中字符的十进制码位。该码位的十六进制表示形式为 U+00A0 （160 = 10 × 16¹ + 0 × 16⁰）。您可以在 Unicode 代码表和字符数据库中找到它。  NO-BREAK SPACE

在 CSS 中，您需要对此类字符使用 Unicode 转义序列，该序列基于字符码位的十六进制值。所以你需要写

.breadcrumbs a:before {
  content: '\a0';
}

只要转义序列在字符串值中排在最后，这就会起作用。如果字符跟随，有两种方法可以避免误解：

a） （其他人提到）对转义序列正好使用六个十六进制数字：

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b） 在转义序列后添加一个空格（例如空格）字符：

.breadcrumbs a:before {
  content: '\a0 foo';
}

（由于是十六进制数字，否则将意味着这里，或者如果您有合适的字体，则为 ਏ。f\a0fGURMUKHI LETTER EE

分隔空格将被忽略，这将被显示，其中此处显示的空间将是一个字符。 fooNO-BREAK SPACE

与六位数方法（）相比，空格方法（）具有以下优点：'\a0 foo''\0000a0foo'

• 打字更容易，因为不需要前导零，数字也不需要计算;
• 它更容易阅读，因为转义序列和后面的文本之间有空格，数字不需要计算;
• 它需要更少的空间，因为不需要前导零;
• 它是向上兼容的，因为将来支持 U+10FFFF 以上的 Unicode 代码点将需要修改 CSS 规范。

因此，要在转义字符后显示空格，请在样式表中使用两个空格 –

.breadcrumbs a:before {
  content: '\a0  foo';
}

– 或明确表示：

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

有关详细信息，请参见 CSS 2.1 的“4.1.3 字符和大小写”部分。

例如：

http://character-code.com/arrows-html-codes.php

示例：如果要选择您的角色，我选择了“&#8620”“&#x21ac”（我们使用十六进制值）

.breadcrumbs a:before {
  content: '\0021ac';
}

结果： ↬

就是这样:)

这里有两种方法：

• 在 HTML 中：

  <div class="ics">&#9969;</div>

这将导致 ⛱

• 在 Css 中：

  .ics::before {content: "\9969;"}

使用 HTML 代码<div class="ics"></div>

这也导致 ⛱

我知道这是一个相当古老的帖子，但如果间距是你所追求的，为什么不简单地：

.breadcrumbs a::before {
  content: '>';
  margin-left: 8px;
  margin-right: 8px;
}

我以前用过这种方法。在我的测试中，它对其他带有“>”的线条完全可以换行。

只是为了让这里的答案更完整一些。如果您使用的是 ，那么与其使用 unicode 转义符，不如使用 HTML 实体。例如，用于生成换行符。content: attr(aria-label);