使用CSS内容添加HTML实体-Java 学习之路

906

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

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

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

9 回答

967
Update ：PointedEars提到在所有css情况下   的正确立场是
'\a0 ' 暗示该空间是十六进制字符串的终结符，并被转义序列吸收 . 他进一步指出了这个authoritative description，这听起来像是我在下面描述和解决的问题的一个很好的解决方案 .

您需要做的是使用转义的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也是如此 .
回复于 2024-05-07T12:56:04+08:00
0
我知道这是一个非常古老的帖子，但如果间距是你所有的后续，为什么不简单：
```
.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}
```
我以前用过这个方法 . 在我的测试中，它用“>”包裹在其他线条上 .
回复于 2024-05-07T12:56:04+08:00
42
使用十六进制代码表示不间断的空格 . 像这样的东西：
```
.breadcrumbs a:before {
    content: '>\00a0';
}
```
回复于 2024-05-07T12:56:04+08:00
-2

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

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

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

回复于 2024-05-07T12:56:04+08:00
31
Here are two ways:
- 在HTML中：
<div class="ics">⛱</div>

这将导致⛱
- 在Css中：
.ics::before {content: "\9969;"}

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

这也导致⛱
回复于 2024-05-07T12:56:04+08:00
79
有一种方法可以粘贴 nbsp - 打开CharMap并复制 character 160 . 但是，在这种情况下，我可能会用填充来填充它，如下所示：
```
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
```
您可能需要设置面包屑 display:inline-block 或其他东西 .
回复于 2024-05-07T12:56:04+08:00
8
你必须使用转义的unicode：

喜欢
```
.breadcrumbs a:before {
    content: '\0000a0';
}
```
更多信息：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/
回复于 2024-05-07T12:56:04+08:00
16
例如：

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

示例：如果要选择字符，我选择"&#8620" "&#x21ac"（我们使用 HEX 值）
```
.breadcrumbs a:before {
    content: '\0021ac';
}
```
结果：↬

而已：）
回复于 2024-05-07T12:56:04+08:00
152
CSS不是HTML .   在HTML中名为character reference;相当于十进制数字字符引用   . 160是Unicode中的 NO-BREAK SPACE 字符的十进制代码点（或UCS-2;请参阅HTML 4.01 Specification） . 该代码点的十六进制表示为U 00A0（160 = 10×161 0×160） . 您将在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 字符 .

与六位数方法（ '\0000a0foo' ）相比，空白空间方法（ '\a0 foo' ）具有以下优势：
- 它是 easier to type ，因为不需要前导零，并且不需要计算数字;
- 它是 easier to read ，因为转义序列和后续文本之间有空格，并且不需要计算数字;
- it requires less space ，因为没有必要使用前导零;
- 它是 upwards-compatible ，因为将来支持超过U 10FFFF的代码点需要修改CSS规范 .
因此，要在转义字符后显示空格，请在样式表中使用两个空格 -
```
.breadcrumbs a:before {
  content: '\a0  foo';
}
```
- 或明确说明：
```
.breadcrumbs a:before {
  content: '\a0\20 foo';
}
```
有关详细信息，请参阅CSS 2.1, section "4.1.3 Characters and case" .
回复于 2024-05-07T12:56:04+08:00

使用CSS内容添加HTML实体

9 回答

相关问题