使用 CSS 内容添加 HTML 实体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/190396/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding HTML entities using CSS content
提问by nickf
How do you use the CSScontentproperty to add HTMLentities?
如何使用CSScontent属性添加HTML实体？
Using something like this just prints to the screen instead of the non-breaking space:
使用这样的东西只是打印 到屏幕而不是不间断的空间：
.breadcrumbs a:before {
content: ' ';
}
回答by mathieu
You have to use the escaped unicode :
您必须使用转义的 unicode ：
Like
喜欢
.breadcrumbs a:before {
content: '.breadcrumbs a:before {
content: '\a0';
}
00a0';
}
More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
更多信息：http: //www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
回答by PointedEars
CSS is not HTML. is a named character referencein HTML; equivalent to the decimal numeric character reference  . 160 is the decimal code pointof the NO-BREAK SPACEcharacter in Unicode(or UCS-2; see the HTML 4.01 Specification). The hexadecimal representation of that code point is U+00A0 (160 = 10 × 161+ 0 × 160). You will find that in the Unicode Code Chartsand Character Database.
CSS 不是 HTML。 是HTML 中的命名字符引用；相当于十进制数字字符引用 。160是十进制码点的的NO-BREAK SPACE在字符的Unicode（或UCS-2;见HTML 4.01规范）。该代码点的十六进制表示为 U+00A0 (160 = 10 × 16 1+ 0 × 16 0)。您会在 Unicode Code Chartsand Character Database 中找到它。
In CSS you need to use a Unicode escape sequence for such characters, which is based on the hexadecimal value of the code point of a character. So you need to write
在 CSS 中，您需要对此类字符使用 Unicode 转义序列，该序列基于字符代码点的十六进制值。所以你需要写
.breadcrumbs a:before {
content: '.breadcrumbs a:before {
content: '\a0 foo';
}
00a0foo';
}
This works as long as the escape sequence comes last in a string value. If characters follow, there are two ways to avoid misinterpretation:
只要转义序列最后出现在字符串值中，这就会起作用。如果后面跟着字符，有两种方法可以避免误解：
a) (mentioned by others) Use exactly six hexadecimal digits for the escape sequence:
a)（其他人提到）使用正好六个十六进制数字作为转义序列：
.breadcrumbs a:before {
content: '\a0 foo';
}
b) Add one white-space (e. g., space) character after the escape sequence:
b) 在转义序列后添加一个空白（例如，空格）字符：
.breadcrumbs a:before {
content: '\a0 foo';
}
(Since fis a hexadecimal digit, \a0fwould otherwise mean GURMUKHI LETTER EEhere, or ? if you have a suitable font.)
（因为f是十六进制数字，\a0f否则GURMUKHI LETTER EE在这里意味着，或者 ? 如果您有合适的字体。）
The delimiting white-space will be ignored, and this will be displayed ?foo, where the displayed space here would be a NO-BREAK SPACEcharacter.
分隔空格将被忽略，这将被显示?foo，这里显示的空格将是一个NO-BREAK SPACE字符。
The white-space approach ('\a0 foo') has the following advantages over the six-digit approach ('\0000a0foo'):
'\a0 foo'与六位数方法 ( '\0000a0foo')相比，空白方法 ( ) 具有以下优点：
- it is easier to type, because leading zeroes are not necessary, and digits do not need to be counted;
- it is easier to read, because there is white-space between escape sequence and following text, and digits do not need to be counted;
- it requires less space, because leading zeroes are not necessary;
- it is upwards-compatible, because Unicode supporting code points beyond U+10FFFF in the future would require a modification of the CSS Specification.
- 它是更容易输入，因为前导零是没有必要的，而且并不需要数字来计算;
- 它是更容易阅读，因为转义序列与下面的文本之间的空白，并且不需要数字来计算;
- 它需要更少的空间，因为前导零不是必需的；
- 它是向上兼容的，因为将来支持 U+10FFFF 以外的 Unicode 代码点将需要修改 CSS 规范。
Thus, to display a space after an escaped character, use twospaces in the stylesheet –
因此，要在转义字符后显示一个空格，请在样式表中使用两个空格 -
content:'>\a0 '; /* or */
content:'>content:'No.breadcrumbs a:before {
content: '>.breadcrumbs a:before { content: '>'; padding-right: .5em; }
a0';
}
a0Break' /* becomes No਋reak */
00a0'; /* because you'll find: */
content:'No\a0 Break'; /* and */
content:'No.breadcrumbs a:before {
content: '.breadcrumbs a::before {
content: '>';
margin-left: 8px;
margin-right: 8px;
}
21ac';
}
00a0Break'; /* becomes No Break as opposed to below */
– or make it explicit:
– 或明确表示：
##代码##See CSS 2.1, section "4.1.3 Characters and case"for details.
有关详细信息，请参阅CSS 2.1，“4.1.3 字符和大小写”部分。
回答by dlamblin
Update: PointedEars mentions that the correct stand in for in all css situations would be'\a0 'implying that the space is a terminator to the hex string and is absorbed by the escaped sequence. He further pointed out this authoritative descriptionwhich sounds like a good solution to the problem I described and fixed below.
更新：PointedEars 提到 在所有 css 情况下的正确代表将'\a0 '暗示空格是十六进制字符串的终止符并被转义序列吸收。他进一步指出这个权威描述听起来像是我在下面描述和修复的问题的一个很好的解决方案。
What you need to do is use the escaped unicode. Despite what you've been told \00a0is not a perfect stand-in for within CSS; so try:
您需要做的是使用转义的 unicode。尽管你被告知\00a0这不是 CSS 中的完美替代品；所以尝试：
Specifically using \0000a0as .
If you try, as suggested by mathieu and millikin:
具体使用\0000a0as 。如果你尝试，正如 mathieu 和 millin 所建议的那样：
It takes the B into the hex escaped characters. The same occurs with 0-9a-fA-F.
它将 B 带入十六进制转义字符。0-9a-fA-F 也会发生同样的情况。
回答by netgoblin
In CSS you need to use a Unicode escape sequence in place of HTML Entities. This is based on the hexadecimal value of a character.
在 CSS 中，您需要使用 Unicode 转义序列来代替 HTML 实体。这是基于字符的十六进制值。
I found that the easiest way to convert symbol to their hexadecimal equivalent is, such as from ▾ (▾) to \25BEis to use the Microsoft calculator =)
我发现将符号转换为十六进制等价物的最简单方法是，例如 from ▾ ( ▾) to\25BE是使用 Microsoft 计算器 =)
Yes. Enable programmers mode, turn on the decimal system, enter 9662, then switch to hex and you'll get 25BE. Then just add a backslash \to the beginning.
是的。启用程序员模式，打开十进制系统，输入9662，然后切换到十六进制，你会得到25BE. 然后只需\在开头添加一个反斜杠。
回答by John Millikin
Use the hex code for a non-breaking space. Something like this:
使用十六进制代码作为不间断空格。像这样的东西：
##代码##回答by Dare
There is a way to paste an nbsp- open CharMap and copy character 160. However, in this case I'd probably space it out with padding, like this:
有一种方法可以粘贴nbsp打开的 CharMap 并复制字符 160。但是，在这种情况下，我可能会用填充将其隔开，如下所示：
You might need to set the breadcrumbs display:inline-blockor something, though.
不过，您可能需要设置面包屑display:inline-block或其他东西。
回答by Ferhat KO?ER
For Example :
例如 ：
http://character-code.com/arrows-html-codes.php
http://character-code.com/arrows-html-codes.php
Example: If you want select your character , I selected "↬" "↬" (We use HEXvalues)
示例：如果你想选择你的角色，我选择了“↬”“↬”（我们使用十六进制值）
##代码##Result : ↬
结果 : ↬
Thats it :)
就是这样 ：）
回答by brian-welch
I know this is an pretty old post, but if spacing is all your after, why not simply:
我知道这是一个很老的帖子，但如果间距是你的全部，为什么不简单地：
##代码##I have used this method before. It wraps perfectly fine to other lines with ">" by its side in my testing.
我以前用过这个方法。在我的测试中，它可以完美地包装到带有“>”的其他行。
回答by Tarandeep Singh
Here are two ways:
这里有两种方法：
In HTML:
<div class="ics">⛱</div>
在 HTML 中：
<div class="ics">⛱</div>
This will result into ⛱
这将导致⛱
In Css:
.ics::before {content: "\9969;"}
在 CSS 中：
.ics::before {content: "\9969;"}
with HTML code <div class="ics"></div>
带有 HTML 代码 <div class="ics"></div>
This also results in ⛱
这也导致⛱
