当前位置:  开发笔记 > 编程语言 > 正文

使用CSS内容添加HTML实体

如何解决《使用CSS内容添加HTML实体》经验,为你挑选了7个好方法。

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



1> mathieu..:

你必须使用转义的unicode:

喜欢

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

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


前导零是多余的,参见[CSS 2.1:4.3.7 Strings](http://www.w3.org/TR/CSS2/syndata.html#strings).''>\a0'足够了.
我的工具http://amp-what.com/#q=%3E提供了"CSS"模式.选择页面底部的"css".根据上面的CSS参考,当它们不明确时,它们需要以空格分隔.
@dlamblin此外,为了避免字符被解释为转义序列的一部分*可靠*,添加标准的空格:`'>\a0 bc'`显示为`> bc`.
[CSS字符转换器](http://www.evotech.net/articles/testjsentities.html)

2> PointedEars..:

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字符和大小写"部分.



3> dlamblin..:

更新: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也是如此.


您只需要在转义序列之后放置一个空格,如下所示:`'\ a0 Break'`.''\ 0000a0Break'`*不可靠.
参见[CSS 2.1,"4.1.3字符和案例"部分](http://www.w3.org/TR/CSS2/syndata.html#escaped-characters).这也表明你的方法应该是可靠的CSS 2.1.但我发现空白方法更清洁(向上兼容)并且占用空间更小.

4> 小智..:

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

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

是.启用程序员模式,打开十进制系统,输入9662,然后切换到十六进制,你就会得到25BE.然后只需\在开头添加一个反斜杠.


虽然完全有用,但它并没有真正回答这个问题,所以这对问题的评论会更好.

5> John Milliki..:

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

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



6> 小智..:

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

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

但是,您可能需要设置面包屑display:inline-block或其他内容.


而不是粘贴,我坚持使用一个实体,因此未来的维护者很清楚它与空间不同.
另一方面,你不应该像它们应该那样做面包屑,即:>符号应该与面包屑一致,而不仅仅是视觉风格.至少如果你想谷歌看到你的面包屑并在搜索引擎的列表下列出它们.

7> Ferhat KOÇER..:

例如 :

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

示例:如果要选择角色,我选择"↬""↬"(我们使用HEX值)

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

结果:↬

而已 :)

推荐阅读
N个小灰流_701
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有