使用CSS内容添加HTML实体

如何使用CSS content属性添加超文本标记语言个实体?

使用这样的东西只是把 打印到屏幕上，而不是不间断的空格:

.breadcrumbs a:before {content: ' ';}
486136 次浏览
小开

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

.breadcrumbs a:before {content: '>\00a0';}
小开
最佳答案

你必须使用转义的unicode:

就像

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

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

小开

更新: PointedEars提到，在所有css情况下， 的正确代表将是
'\a0 '表示空格是十六进制字符串的结束符，并被转义序列所吸收。他进一步指出了第一条，这听起来像是我下面描述和修正的问题的一个很好的解决方案

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

小开

有一种方法可以粘贴nbsp -打开CharMap并复制160字符。然而，在这种情况下，我可能会用填充来分隔它，就像这样:

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

不过，您可能需要将面包屑设置为display:inline-block或其他内容。

小开

在CSS中，你需要使用Unicode转义序列来代替HTML实体。这是基于一个字符的十六进制值。

我发现将符号转换为16进制的最简单方法是，例如从▾(▾)到\25BE是使用微软计算器=)

是的。启用程序员模式，打开十进制，输入9662，然后切换到十六进制，你会得到25BE。然后在开头加一个反斜杠\。

小开

CSS不是HTML。 在HTML中被命名为字符引用;等价于十进制数字字符引用 。160是Unicode中NO-BREAK SPACE字符的小数代码点(或ucs - 2;请看第7条)。该码位的十六进制表示为U+00A0 (160 = 10 × 161 +0 × 160)。您可以在Unicode  0和 1中找到它。

在CSS中，你需要为这样的字符使用Unicode转义序列，它是基于字符码位的十六进制值。所以你需要写

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

只要转义序列位于字符串值的最后，这就可以工作。如果后面跟着字符，有两种方法可以避免误解:

a)(其他人提到的)使用恰好6个十六进制数字作为转义序列:

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

b)在转义序列后添加一个空白字符(例如空格):

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

(因为f是一个十六进制数字，\a0f在这里表示GURMUKHI LETTER EE，如果你有合适的字体，可以表示ਏ。)

分隔空白将被忽略，它将显示为 foo，这里显示的空格将是NO-BREAK SPACE字符。

空格方法('\a0 foo')比六位数方法('\0000a0foo')有以下优点:

  • 它是更容易打字，因为前导零是不必要的，数字也不需要计数;
  • 它是更容易阅读，因为转义序列和后面的文本之间有空白，数字不需要计数;
  • 它是占用空间少，因为前导0是不必要的;
  • 它是upwards-compatible，因为Unicode在未来支持超过U+10FFFF的代码点将需要修改CSS规范。

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

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

——或者明确地说:

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

详见CSS 2.1，章节“;4.1.3字符和大小写”。

小开

例如:

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

例子:如果你想选择你的角色，我选择了"↬"“和# x21ac"(我们使用十六进制值)

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

结果:↬

就是这样。

小开

# 0

  • 在HTML < p >:

    # 0 < / p >

这将导致& # 9969; < / p >

  • 在Css < p >:

    # 0 < / p >

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

这也导致⛱

小开

我知道这是一个相当老的帖子，但如果间距是你所追求的，为什么不简单地:

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

我以前用过这种方法。它完全可以用“;>"在我的测试中。


提交答案