使用CSS内容添加HTML实体

How do you use the CSS content property to add html entities?

如何使用CSS content属性添加html实体?

Using something like this just prints   to the screen instead of the non-breaking space:

使用这种方法只打印在屏幕上，而不是不间断的空间:

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

9 个解决方案

#1

933

You have to use the escaped unicode :

您必须使用转义的unicode:

就像

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

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- entity in numeric-order/

#2

142

CSS is not HTML.   is a named character reference in HTML; equivalent to the decimal numeric character reference  . 160 is the decimal code point of the NO-BREAK SPACE character in Unicode (or UCS-2; see the HTML 4.01 Specification). The hexadecimal representation of that code point is U+00A0 (160 = 10 × 16¹ + 0 × 16⁰). You will find that in the Unicode Code Charts and Character Database.

CSS不是HTML。,是HTML中命名的字符引用;相当于十进制数字字符引用 160是Unicode(或UCS-2)中不间断空格字符的十进制码点;参见HTML 4.01规范)。代码点的十六进制表示是U + 00 a0(160 = 161 + 0××160)。您将在Unicode代码图表和字符数据库中找到这一点。

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: '\a0';
}

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)(别人提到过)转义序列正好使用6个十六进制数字:

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

b) Add one white-space (e. g., space) character after the escape sequence:

b)增加一个空格(例如:，空格)转义序列后的字符:

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

(Since f is a hexadecimal digit, \a0f would otherwise mean GURMUKHI LETTER EE here, or ਏ if you have a suitable font.)

(因为f是一个十六进制数字,\ a0f否则意味着果鲁穆奇语信EE,或ਏ如果你有一个合适的字体。)

The delimiting white-space will be ignored, and this will be displayed foo, where the displayed space here would be a NO-BREAK SPACE character.

分隔空格将被忽略，并将显示foo，其中显示的空格将是一个无中断的空格字符。

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.
它是向上兼容的，因为未来的Unicode支持代码点超出了U+10FFFF，这需要修改CSS规范。

Thus, to display a space after an escaped character, use two spaces in the stylesheet –

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

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

– or make it explicit:

-或明确说明:

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

See CSS 2.1, section "4.1.3 Characters and case" for details.

详情请参阅CSS 2.1，“4.1.3字符和案例”一节。

#3

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 description which 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 \00a0 is not a perfect stand-in for   within CSS; so try:

您需要做的是使用转义的unicode。尽管有人告诉你，00a0并不是完美的替代品在CSS;所以尝试:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No&nbsp;Break as opposed to below */

Specifically using \0000a0 as  . If you try, as suggested by mathieu and millikin:

特别使用\0000a0作为&。如果你尝试一下，正如马蒂厄和米莉金所建议的:

content:'No\00a0Break'   /* becomes No&#2571;reak */

It takes the B into the hex escaped characters. The same occurs with 0-9a-fA-F.

它将B带入十六进制转义字符。0-9a-fA-F也是同样的情况。

#4

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 \25BE is to use the Microsoft calculator =)

我发现最简单的方法将符号转换为十六进制等效,比如▾(& # 9662;)\ 25是使用微软计算器=)

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，然后切换到十六进制，你将得到25。然后在开始添加一个反斜杠\。

#5

Use the hex code for a non-breaking space. Something like this:

使用十六进制代码为一个不间断的空间。是这样的:

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

#6

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:

有一种方法可以粘贴打开的CharMap并复制字符160。但是，在这种情况下，我可能会用空格填充，比如:

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

You might need to set the breadcrumbs display:inline-block or something, though.

您可能需要设置breadcrumdisplay:inline-block或其他东西。

#7

For Example :

例如:

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

Example: If you want select your character , I selected "&#8620" "&#x21ac" (We use HEX values)

例如:如果您想选择您的角色，我选择了“↬”“↬”(我们使用十六进制值)

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

Result : ↬

结果:↬

Thats it :)

这是它:)

#8

I know this is an pretty old post, but if spacing is all your after, why not simply:

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

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

I have used this method before. It wraps perfectly fine to other lines with ">" by its side in my testing.

我以前用过这个方法。在我的测试中，它以“>”的形式完美地覆盖了其他行。

#9

-2

Here are two ways:

这里有两种方式:

In HTML:

在HTML中:

<div class="ics">⛱</div>

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

This will result into ⛱

这将使得⛱

In Css:

在Css中:

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

. mab '::在{内容:\ 9969;" }

with HTML code <div class="ics"></div>

使用HTML代码

。

This also results in ⛱

这也导致⛱

#1

933