使用 CSS 内容添加 HTML 实体

Question

如何使用 CSS content 属性添加 HTML 实体？

使用类似的东西只是将  打印到屏幕上，而不是不间断的空格：

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

Answer 1

你必须使用转义的 unicode：

喜欢

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

更多信息：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 2

CSS 不是 HTML。   是在 HTML 中命名的 character reference；相当于十进制数字字符引用 。 160 是Unicode（或UCS-2；参见HTML 4.01 Specification）中NO-BREAK SPACE 字符的十进制代码点。该代码点的十六进制表示为 U+00A0 (160 = 10 × 16¹ + 0 × 16⁰)。您会在 Unicode Code Charts 和 Character Database 中找到它。

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

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

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

a)（其他人提到）使用六位十六进制数字作为转义序列：

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

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

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

（由于f 是一个十六进制数字，\a0f 在此处的其他意思是 GURMUKHI LETTER EE，或者如果您有合适的字体，则为 ਏ。）

分隔的空白将被忽略，这将显示为 foo，此处显示的空格将是NO-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, section "4.1.3 Characters and case"。

Answer 3

更新：PointedEars 提到，在所有 css 情况下，  的正确代表是
'\a0 '，这意味着该空格是十六进制字符串的终止符并被转义序列。他进一步指出了这个authoritative description，这听起来是解决我在下面描述和修复的问题的好方法。

您需要做的是使用转义的 unicode。尽管有人告诉你 \00a0 并不是 CSS 中   的完美替代品；所以试试：

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

具体使用\0000a0 作为 。 如果您按照 mathieu 和 millikin 的建议尝试：

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

它将 B 转换为十六进制转义字符。 0-9a-fA-F 也是如此。

Answer 4

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

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

是的。打开程序员模式，打开十进制，输入9662，然后切换到十六进制，你会得到25BE。然后只需在开头添加一个反斜杠\。

Answer 5

使用十六进制代码作为不间断空格。像这样的：

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

Answer 6

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

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

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

Answer 7

例如：

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

示例：如果你想选择你的角色，我选择了“↬”“↬”（我们使用HEX值）

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

结果：↬

就是这样:)

Answer 8

我知道这是一篇很老的帖子，但如果间距是你的全部追求，为什么不简单：

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

我以前用过这种方法。在我的测试中，它可以完美地包裹在其他行中，并带有“>”。

Answer 9

这里有两种方法：

• 在 HTML 中：

  <div class="ics">⛱</div>

这将导致 ⛱

• 在 CSS 中：

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

带有HTML代码<div class="ics"></div>

这也会导致 ⛱