Question

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

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

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

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中NO-BREAK SPACE字符的十进制代码点;请参阅HTML 4.01 Specification）。该代码点的十六进制表示为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的代码点需要修改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&nbsp;Break as opposed to below */

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

content:'No\00a0Break'   /* becomes No&#2571;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

示例：如果你想选择你的角色，我选择了＆＃34;＆amp;＃8620＆＃34; ＆＃34;＆安培;＃x21ac＆＃34; （我们使用 HEX 值）

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

结果：↬

多数民众赞成：）

Answer 8

我知道这是一个非常古老的帖子，但如果间距是你所有的，那么为什么不简单：

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

之前我使用过这种方法。使用＆＃34;＆gt;＆＃34;它可以很好地包装到其他线条。在我的测试中支持它。

Answer 9

以下是两种方式：

在HTML中：

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

这将导致 ⛱

在Css中：

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

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

这也导致⛱

使用CSS内容添加HTML实体

9 个答案: