使用CSS content添加HTML实体

Question

使用CSS content添加HTML实体

1128

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

像这样使用只会在屏幕上打印出 而不是非换行空格：

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

- nickf

8

在另一方面，使用CSS添加内容会违反关注点分离，CSS应只用于定义样式。从可访问性角度考虑，最好避免这样做，因为禁用CSS会破坏整个标记。然而，使用这种技术添加图像是不错的。 - questzen

106

视情况而定。在这种情况下，是为了演示目的。在html中放置“>”符号会违反SoC原则。 - mathieu

3

你觉得把它改成有序列表会更好吗？我的意思是，它是一个有顺序的列表，不是吗？ - alex

4

我认为使用CSS的:after在已排序的列上设置升序/降序排序指示符是完全可以接受（并且是好的做法）。 - Josh M.

16

我注意到人们对于SoC原则已经疯狂追捧。看天，">"符号对你来说到底是什么内容?!求你了！在这个上下文中它只是一个图标、一个小部件、一个项目符号，你怎么称呼都可以。对我来说，内容应该是可搜索的东西。 - user776686

显示剩余4条评论

10个回答

199

CSS不是HTML。在HTML中， 是一个命名的character reference，等同于十进制数字字符引用 。160是Unicode（或UCS-2；请参见HTML 4.01 Specification）中NO-BREAK SPACE字符的十进制码点。该码点的十六进制表示为U+00A0（160 = 10 × 16 ¹ + 0 × 16 ⁰）。您可以在Unicode Code Charts和Character Database中找到它。

在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')具有以下优点:

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

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

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

- 或者明确表示：

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

请参考CSS 2.1，第4.1.3节“字符和大小写”中的详细信息。

- PointedEars

+1 对于“在转义字符后显示空格”的技巧，但必须提到添加一个 nbsp 然后再加一个空格有点违背了 nbsp 的目的 ;) - TWiStErRob

@TWiStErRob 不是，一个不间断空格字符和一个可断开空格字符的组合（或反之亦然）将显示大约两个空格字符的间隙，而两个或更多的verbatim空格字符只会显示一个空格字符的宽度，因为布局引擎的解析器将连续的可断开空格（包括换行符）折叠成一个空格字符，除非white-space CSS 属性声明了其他情况。 - PointedEars

是的，我知道折叠的问题，但 nbsp 的意义在于它是不间断的，单词字符默认也是不间断的，因此在非间断空格旁边添加一个可断开的空格是没有意义的，最终结果将会被打破。我说的是 white-space: normal。 - TWiStErRob

@TWiStErRob 请仔细阅读我的回答。这是一个“显示转义字符后的空格”的示例。原始代码中有一个NO-BREAK SPACE字符，所以我使用了它的转义序列。您可以选择任何其他转义序列；如果需要，您也可以声明white-space: nowrap。 - PointedEars

84

更新：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&nbsp;Break as opposed to below */

具体来说，使用\0000a0作为 。如果您尝试像mathieu和millikin建议的那样：

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

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

- dlamblin

8

按照规定，您只需要在转义序列后加一个空格即可：'\a0 Break'。 '\0000a0Break' 不可靠。 - PointedEars

@PointedEars 很有趣，那么这个空格是终止符，不包括在字符串中？ - dlamblin

2

请参阅 CSS 2.1，第4.1.3节“字符和大小写”。这也表明您的方法应该符合 CSS 2.1 的可靠性要求。但我认为使用空格的方法更加简洁（向上兼容）且占用空间更小。 - PointedEars

54

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

我发现将符号转换为其十六进制等效项的最简单方法是使用Microsoft计算器=），例如从▾（▾）到\25BE。

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

- netgoblin

6

虽然非常有用，但它并没有真正回答问题，因此最好将其作为对问题的评论。 - dlamblin

1

黑色向右小箭头 (▸ \25B8 ▸ ▸) 万岁。另外，更多信息请参见 http://en.wikipedia.org/wiki/Geometric_Shapes。 - Joel Purra

Joel Purra，再读一遍维基百科。你弄错了符号。 - netgoblin

@netgoblin：怎么了？我只是碰巧喜欢黑色右箭头。 - Joel Purra

1

我使用http://graphemica.com，您可以在其中获取十进制、十六进制等内容。 - Mike

36

使用十六进制代码表示不间断空格。例如：

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

- John Millikin

18

有一种方法可以粘贴一个 nbsp - 打开字符映射表并复制 字符160。但是，在这种情况下，我可能会使用填充来留出空白，像这样：

有一种方法可以将 nbsp 粘贴进去 - 打开字符映射表并复制字符160。但是，在这种情况下，我可能会使用填充将它空开，例如：

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

你可能需要将面包屑设置为display:inline-block或其他样式。

- Dare

4

与其使用“ ”来代替空格，建议使用实体，这样将来的维护者就能清楚地知道它与空格是不同的。 - nickf

2

另一方面，如果您希望谷歌在搜索引擎中列出您的面包屑并将它们列在您的列表下面，那么您不应该像视觉样式一样使用>符号，而是应该将其与面包屑内联。 - Rafael Herscovici

没错，将所需的字符粘贴过来对我有用。谢谢。 - Michal - wereda-net

17

例如：

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

示例：如果您想选择您的字符，我选择了“&#8620”和“&#x21ac”（我们使用十六进制值）。

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

结果： ↬

就是这样 :)

- Ferhat KOÇER

我使用了content:'\10095';，但输出不显示图标，而是显示矩形。 - kapil

1

我知道这是一个相当老的帖子，但如果你只想要间距，为什么不简单地这样做：

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

我以前用过这种方法。在我的测试中，它与">"一起很好地换行到其他行。

- brian-welch

0

以下是两种方法：

HTML 中：

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

这将会显示出 ⛱

CSS 中：

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

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

同样能够显示出 ⛱

- Tarandeep Singh

正确答案是 .ics::before {content: '\9969';}。 - Marco Scarnatto

1

对于HTML，您不需要div class = ics。您可以简单地使用&#<number>;。此外，请注意它是否为十六进制数字，在这种情况下，您需要使用&#x<hex number>; https://www.w3schools.com/html/html_symbols.asp - Ryan Harlich

0

只是为了让这里的答案更完整。如果您正在使用像content: attr(aria-label);这样的东西，则不需要使用Unicode转义，而是需要使用HTML实体。例如，使用
来生成换行符。

- Julian Knight

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mathieu · Accepted Answer

1174

你必须使用转义的 Unicode：

例如：

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

- mathieu

69

前导零是多余的，参见CSS 2.1: 4.3.7 字符串。'>\a0'即可。 - PointedEars

22

为了可靠地防止字符被解释为转义序列的一部分，需要添加标准的空格：'>\a0 bc' 显示为 > bc。请注意不改变原意，使语言通俗易懂。 - PointedEars

23

我的工具http://amp-what.com/#q=%3E 提供“CSS”模式。在页面底部选择“css”。根据上面的CSS参考，当它们存在歧义时，这些需要用空格分隔。 - ndp

1

@mathieu 你能用“content”来添加图片吗？只是好奇。 - weia design

2

@Adam，不要使用“append”来添加图片，而应该使用“background-image”，并设置为"display:inline-block; width:123px; height:123px;" （使用精确的宽度/高度）。 - Nathan J.B.

显示剩余4条评论