协慌网

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

使用这样的东西只打印 到屏幕而不是不间断的空间：

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

你必须使用转义的 unicode：

喜欢

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

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

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

在 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字符。

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

• 它更容易输入 ，因为不需要前导零，并且不需要计算数字;
• 它更容易阅读 ，因为转义序列和后续文本之间存在空格，并且不需要计算数字;
• 它需要的空间更少 ，因为不需要前导零;
• 它是向上兼容的 ，因为将来支持超过 U + 10FFFF 的代码点需要修改 CSS 规范。

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

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

- 或明确说明：

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

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

更新 ：PointedEars 提到正确的立场为 在所有的 CSS 情况下
'\a0 '暗示空间是十六进制字符串的终结符，并被转义序列吸收。他进一步指出了这种权威的描述 ，这听起来像是我在下面描述和解决的问题的一个很好的解决方案。

您需要做的是使用转义的 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 也是如此。