使用CSS内容添加HTML实体

Adding HTML entities using CSS content

如何使用css content属性添加HTML实体？

使用类似的方法，只需将打印到屏幕上，而不是不间断的空间：

1
2
3

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

相关讨论

必须使用转义的Unicode:

喜欢

1
2
3

.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×161+0×160)。您将在Unicode代码图和字符数据库中找到它。

在CSS中，您需要为这些字符使用一个Unicode转义序列，它基于字符代码点的十六进制值。所以你需要写

1
2
3

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

只要转义序列在字符串值中排在最后，这就可以工作。如果字符跟随，有两种方法可以避免误解：

a)(其他人提到过)转义序列正好使用六个十六进制数字：

1
2
3

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

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

1
2
3

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

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

将忽略分隔空白，并将显示 foo，其中此处显示的空白将是NO-BREAK SPACE字符。

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

更容易输入，因为不需要前导零，也不需要计算数字；
更容易阅读，因为转义序列和后面的文本之间有空白，不需要计算数字；
它需要更少的空间，因为不需要前导零；
它是向上兼容的，因为将来支持U+10ffff以外的Unicode代码点需要修改CSS规范。

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

1
2
3

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

–或明确：

1
2
3

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

有关详细信息，请参阅CSS 2.1"4.1.3字符和大小写"部分。

相关讨论

更新：pointeders提到，在所有CSS情况下，的正确代理将是'\a0 '表示空间是十六进制字符串的终止符，被转义序列吸收。他进一步指出了这一权威性的描述，这听起来是我在下面描述和修复的问题的一个很好的解决方案。

您需要做的是使用转义的Unicode。尽管有人告诉你，\00a0在css中不是的完美代替品，所以尝试：

1
2
3
4

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作为。如果你按照马修和米利金的建议尝试：

1	content:'No\00a0Break' /* becomes No਋reak */

它将b带入十六进制转义字符中。同样的情况也发生在0-9a-fa-f中。

相关讨论

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

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

对。启用程序员模式，打开十进制系统，输入9662，然后切换到hex，您将得到25BE。然后在开头加上反斜杠\。

相关讨论

使用十六进制代码作为不间断空格。像这样：

1
2
3

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

有一种方法可以粘贴nbsp—打开charmap并复制字符160。不过，在这种情况下，我可能会用填充物将其隔开，如下所示：

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

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

相关讨论

例如：

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

示例：如果要选择字符，我选择了"&；8620""&；X21AC"(我们使用十六进制值)

1
2
3

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

结果：&8620；

就是这样：

相关讨论

我知道这是一篇很老的文章，但是如果间隔是你的全部内容，为什么不简单地说：

1
2
3
4
5

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

我以前用过这种方法。在我的测试中，它与其他线条完美结合，旁边有">"。

有两种方法：

在HTML中：
⛱

这将导致和9969；

在CSS中：
.ics::before {content:"\9969;"}

带HTML代码。

这也导致&9969；

相关讨论

Adding HTML entities using CSS content

Related