使用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中的命名字符引用 ; 相当于十进制数字字符引用 .160是十进制码点的的NO-BREAK SPACE在字符的Unicode(或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字符.

'\a0 foo'与六位数方法('\0000a0foo')相比,白空间方法()具有以下优点:

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

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

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

- 或明确说明:

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

有关详细信息,请参阅CSS 2.1,"4.1.3字符和大小写"部分.

Answer 3

更新: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 */

特别使用\0000a0as  .如果您按照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';
}

结果:↬

而已 :)