使用 CSS 内容添加 HTML 实体

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

CSS 不是 HTML。  是 HTML 中的命名字符引用 ;等效于十进制数字字符引用  。 160 是Unicode (或UCS-2 ;请参见HTML 4.01 规范 )中NO-BREAK SPACE字符的十进制代码点 。该代码点的十六进制表示形式是 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 ,或者如果您有合适的字体,则表示GURMUKHI LETTER EE 。)

分隔的空格将被忽略,并将显示为foo ,此处显示的空格将是NO-BREAK SPACE字符。

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

  • 键入比较容易 ,因为不需要前导零,并且不需要对数字进行计数;
  • 更容易阅读 ,因为转义序列和后面的文本之间存在空格,并且不需要对数字进行计数;
  • 需要较少的空间 ,因为不需要前导零;
  • 它是向上兼容的 ,因为将来 Unicode 支持的代码点超出 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。尽管您已被告知\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 也会发生同样的情况。

在 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

示例:如果您想选择您的角色,我选择了 “&#8620”“&#x21ac”(我们使用十六进制值)

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

结果:↬

而已 :)

我知道这是一篇很老的文章,但是如果您只需要空格,为什么不简单:

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

我以前用过这种方法。在我的测试中,它的旁边带有 “>”,可以完美地包裹其他行。

有两种方法:

  • 在 HTML 中:

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

这将导致⛱

  • 在 CSS 中:

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

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

这也导致⛱