使用 CSS 内容添加 HTML 实体

发布于 2024-07-07 05:47:56 字数 260 浏览 11 评论 0原文

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

使用类似的东西只会将   打印到屏幕上，而不是不间断的空格：

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

原文

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

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只是我以为 2024-07-14 05:47:58

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

具体使用 \0000a0 作为。
如果您尝试，按照 mathieu 和 millikin 的建议：

content:'No\00a0Break'   /* becomes No਋reak */

它将 B 放入十六进制转义字符中。 0-9a-fA-F 也会发生同样的情况。

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.

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:

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

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

content:'No\00a0Break'   /* becomes No਋reak */

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

回复收藏 0 原文

一个人练习一个人 2024-07-14 05:47:58

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

我发现将符号转换为十六进制等价物的最简单方法是使用 Microsoft 计算器 = ）

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

回复收藏 0 原文

野侃 2024-07-14 05:47:58

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

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

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

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

回复收藏 0 原文

丑丑阿 2024-07-14 05:47:58

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

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

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

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:

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

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

回复收藏 0 原文

烦人精 2024-07-14 05:47:58

例如：

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

示例：如果你想选择你的角色，我选择了“↬”“↬”（我们使用十六进制值）

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

结果：↬

就是这样:)

For Example :

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

Example: If you want select your character , I selected "↬" "↬" (We use HEX values)

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

Result: ↬

Thats it :)

回复收藏 0 原文

孤星 2024-07-14 05:47:58

我知道这是一篇相当老的文章，但如果间距是您的全部，为什么不简单地：

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

我以前使用过这种方法。它用“>”完美地包裹到其他行在我的测试中。

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.

回复收藏 0 原文

浅唱ヾ落雨殇 2024-07-14 05:47:58

这里有两种方法：

在 HTML 中：
⛱

这将导致
⛱

在 CSS 中：
.ics::before {content: "\9969;"}

和 HTML 代码

这也会导致 ⛱

回复收藏 0 原文

柏拉图鍀咏恒 2024-07-14 05:47:58

只是为了让这里的答案更完整一些。如果您使用类似 content: attr(aria-label); 的内容，那么您不需要使用 unicode 转义，而是需要使用 HTML 实体。例如，使用生成换行符。

回复收藏 0 原文

高速公鹿 2024-07-14 05:47:57

你必须使用转义的unicode：

像

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

You have to use the escaped unicode :

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

回复收藏 0 原文

南街女流氓 2024-07-14 05:47:57

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

在 CSS 中，您需要对此类字符使用 Unicode 转义序列，该序列基于字符代码点的十六进制值。您就需要这样写

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

因此，只要转义序列出现在字符串值的最后，。如果后面有字符，有两种方法可以避免误解：

a) （其他人提到过）使用 6 个十六进制数字作为转义序列：

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

b) 在转义序列后面添加一个空白（例如空格）字符：

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

(Since < code>f 是一个十六进制数字，\a0f 在此表示 GURMUKHI LETTER EE，如果您有合适的字体，则表示 ਏ。

）空格将被忽略，并且将显示 foo，其中显示的空格将是 NO-BREAK SPACE 字符。

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

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

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

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

或者使其明确：

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

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

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.

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

.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:

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

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

.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.)

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.

The white-space approach ('\a0 foo') has the following advantages over the six-digit approach ('\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.

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.

回复收藏 0 原文

~没有更多了~

关于作者

日久见人心

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

使用 CSS 内容添加 HTML 实体

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

使用 CSS 内容添加 HTML 实体

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（10）

关于作者

相关话题

热门标签

推荐作者

尘世孤行

烟─花易冷

你是年少的欢喜

倒带

忱杏

送君千里

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。