使用CSS内容添加HTML实体

848

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

我有一些链接，我通过在每个之前添加一个箭头来制作一个面包屑样式列表。

<div class="breadcrumbs"> 
    <a>One</a> 
    <a>Two</a> 
    <a>Three</a> 
</div>

其中应用了以下样式：

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

的问题是，当面包屑名单会越来越长，换到下一行，箭头留在前面的行上。显而易见的解决办法是改变空间变成一个非换空间，但是这并不工作：

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

它实际上输出 到屏幕上。我通过直接粘贴字符来解决其他奇怪字符（如»），但是如何粘贴 ？

来源

2008-10-10 nickf

从另一种意义上说，使用CSS添加内容违反了关注点的分离，CSS仅适用于样式定义。从可访问性的角度来看，最好避免使用CSS，因为禁用了CSS可以将整个标记加起来。但是，使用这种技术添加图像是很好的。 – questzen 2008-10-10 08:03:30

+92

这取决于。在这种情况下，它用于演示目的。它会“违反”SoC将“>”放入html – mathieu 2008-10-10 09:11:00

只是一个问题，你认为最好是有序列表吗？我的意思是，这是一个订单不是吗？ – alex 2009-03-20 05:36:52

918

您必须使用转义的unicode：

像

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

来源

2008-10-10 07:27:52 mathieu

使用非破坏空间的十六进制代码。事情是这样的：

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

来源

2008-10-10 07:24:21

更新：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作为 。如果你尝试，因为建议的马修和米利：

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

它考虑到了十六进制转义字符的B中。 0-9a-fA-F也发生同样的情况。

来源

2009-09-11 19:09:41 dlamblin

有一种方法来粘贴nbsp - 打开CharMap和复制字符160。然而，在这种情况下，我可能会用填充空间出来，像这样：

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

您可能需要设置面包屑display:inline-block什么的，虽然。

来源

2009-12-05 08:16:34 Dare

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

我发现，符号转换成相应的十六进制等价最简单的方法是，如▾（▾）到\25BE是使用微软计算器=）

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

来源

2011-12-15 16:55:07 netgoblin

137

CSS不是HTML。  是HTML中的一个名为character reference;相当于十进制数字字符引用 。 160是小数点代码点的NO-BREAK SPACE字符Unicode（或UCS-2;请参阅HTML 4.01 Specification）。该代码点的十六进制表示是U + 00A0（160 = 10×16 + 0×16 ）。你会发现在Unicode Code Charts和Character Database。

在CSS中，您需要为这些字符使用Unicode转义序列，这些字符基于字符代码点的十六进制值。所以你需要写

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

这只要转义序列最后一个字符串值的最后一个工作。如果字符跟随，有两种方法，以避免误解：

一）（别人提到）使用转义序列精确六个十六进制数字：

.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, section "4.1.3 Characters and case"的细节。

来源

2011-12-21 20:18:08 PointedEars

例如：

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

例如：如果你想选择你的性格，我选择了 “&＃8620”， “&＃x21ac”（我们使用HEX值）

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

结果：↬

Tha TS吧:)

来源

2015-05-07 15:35:02

-2

这里有两种方法：

在HTML：

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

这将导致到 ⛱

在CSS中：

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

与HTML代码<div class="ics"></div>

这也导致⛱

来源

2016-10-06 08:47:21

我知道这是一个很老的文章，但如果间距都是你的之后，为什么不简单：

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

我以前用过这种方法。它在我的测试中完美地适用于其他带有“>”的线条。

来源

2017-11-04 06:36:48

使用CSS内容添加HTML实体

回答

相关问题