提问



你如何使用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/[42]

其它参考1


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


在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字符和案例部分。[49]

其它参考2


更新:PointedEars提到所有css情况下 的正确位置将是

'\a0 '暗示空间是十六进制字符串的终结符,并被转义序列吸收。他进一步指出了这种权威性的描述,这听起来像是我在下面描述和解决的问题的一个很好的解决方案。[50]


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

其它参考3


在CSS中,您需要使用Unicode转义序列代替HTML实体。这基于字符的十六进制值。


我发现将符号转换为十六进制等效的最简单方法是,例如从▾(▾)到\25BE是使用Microsoft计算器=)


是。启用编程器模式,打开十进制系统,输入9662,然后切换到十六进制,你将25BE。然后只需在开头添加一个反斜杠\

其它参考4


使用十六进制代码表示不间断的空格。像这样的东西:


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

其它参考5


有一种方法可以粘贴nbsp - 打开CharMap并复制字符160 。但是,在这种情况下,我可能会用填充来填充它,如下所示:


.breadcrumbs a:before { content: '>'; padding-right: .5em; }


您可能需要设置面包屑display:inline-block或其他东西。

其它参考6


例如 :


http://character-code.com/arrows-html-codes.php [51]


示例:如果要选择角色,我选择&#8620&#x21ac(我们使用 HEX 值)


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


结果:↬


而已 :)

其它参考7


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


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


我以前用过这个方法。在我的测试中,它用>包裹在其他线条上。

其它参考8


以下是两种方式:



  • 在HTML中:


    <div class="ics">&#9969;</div>



这将导致
   ⛱



  • 在Css中:


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



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


这也导致⛱