1092

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

使用这样的东西只是打印 到屏幕而不是不间断的空间：

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

9 回答 9

1143

您必须使用转义的 unicode ：

像

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

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

于 2008-10-10T07:27:52.243 回答
190

CSS 不是 HTML。  是 HTML 中的命名字符引用；相当于十进制数字字符引用 。160 是Unicode（或UCS-2；请参阅HTML 4.01 规范）中字符的十进制代码点。该代码点的十六进制表示为 U+00A0 (160 = 10 × 16 1 + 0 × 16 0 )。您会在 Unicode代码图表和字符数据库中找到它。NO-BREAK SPACE

在 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在这里表示，或者如果您有合适的字体，则表示 ਏ。）

分隔空白将被忽略，这将被显示 foo，此处显示的空格将是一个NO-BREAK SPACE字符。

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

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

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

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

– 或明确表示：

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

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

于 2011-12-21T20:18:08.320 回答
84

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

您需要做的是使用转义的 unicode。尽管有人告诉您，这并不是CSS\00a0中的完美替代品；&nbsp;所以试试：

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 */

具体使用\0000a0as &nbsp;。如果您按照 mathieu 和 millikin 的建议尝试：

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

它将 B 带入十六进制转义字符。0-9a-fA-F 也是如此。

于 2009-09-11T19:09:41.020 回答
51

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

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

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

于 2011-12-15T16:55:07.757 回答
35

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

.breadcrumbs a:before {
  content: '>\00a0';
}
于 2008-10-10T07:24:21.623 回答
17

有一种方法可以粘贴一个nbsp打开的 CharMap 并复制字符 160。但是，在这种情况下，我可能会用填充将其隔开，如下所示：

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

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

于 2009-12-05T08:16:34.760 回答
11

例如 ：

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

示例：如果您想选择您的角色，我选择了“↬”“↬”（我们使用HEX值）

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

结果：↬</p>

就是这样 ：）

于 2015-05-07T15:35:02.837 回答
0

这里有两种方法：

  • 在 HTML 中：

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

这将导致⛱

  • 在 CSS 中：

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

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

这也导致⛱

于 2016-10-06T08:47:21.750 回答
0

我知道这是一篇很老的帖子，但如果间距是你所追求的，为什么不简单地：

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

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

于 2017-11-04T06:36:48.150 回答