你如何使用CSS content
属性添加html实体?
使用这样的东西只是打印
到屏幕而不是不间断的空间:
.breadcrumbs a:before { content: ' '; }
mathieu.. 1029
你必须使用转义的unicode:
喜欢
.breadcrumbs a:before { content: '\0000a0'; }
更多信息:http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
你必须使用转义的unicode:
喜欢
.breadcrumbs a:before { content: '\0000a0'; }
更多信息:http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
CSS不是HTML.
是HTML中的命名字符引用 ; 相当于十进制数字字符引用
.160是十进制码点的的NO-BREAK SPACE
在字符的Unicode(或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
字符.
'\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字符和大小写"部分.
更新: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 */
特别使用\0000a0
as
.如果您按照mathieu和millikin的建议尝试:
content:'No\00a0Break' /* becomes Noreak */
它将B转换为十六进制转义字符.0-9a-fA-F也是如此.
在CSS中,您需要使用Unicode转义序列代替HTML实体.这基于字符的十六进制值.
我发现将符号转换为十六进制等效的最简单方法是,例如从▾(▾
)\25BE
到使用Microsoft计算器=)
是.启用程序员模式,打开十进制系统,输入9662
,然后切换到十六进制,你就会得到25BE
.然后只需\
在开头添加一个反斜杠.
使用十六进制代码表示不间断的空格.像这样的东西:
.breadcrumbs a:before { content: '>\00a0'; }
有一种方法可以粘贴nbsp
- 打开CharMap和复制字符160.但是,在这种情况下,我可能会使用填充来填充它,如下所示:
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
但是,您可能需要设置面包屑display:inline-block
或其他内容.
例如 :
http://character-code.com/arrows-html-codes.php
示例:如果要选择角色,我选择"↬""↬"(我们使用HEX值)
.breadcrumbs a:before { content: '\0021ac'; }
结果:↬
而已 :)