使用 CSS 内容添加 HTML 实体

Question

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

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

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

原文由 nickf 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你必须使用转义的 unicode ：

喜欢

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

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

原文由 mathieu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

CSS 不是 HTML。   是HTML中的命名 字符引用；相当于十进制数字字符引用   。 160 是 Unicode 中 NO-BREAK SPACE 字符的十进制 _代码点_（或 UCS-2 ；请参阅 HTML 4.01 规范）。该代码点的十六进制表示是 U+00A0 (160 = 10 × 16 1 + 0 × 16 0 )。您会在 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' ) 具有以下优点：

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

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

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

– 或明确说明：

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

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

原文由 PointedEars 发布，翻译遵循 CC BY-SA 4.0 许可协议