html - CSS conten中添加html实体

  显示原文与译文双语对照的内容

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

我有很多的链接,我制作一个宣传面包屑样式列表,可以添加当箭头,然后每个。


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

它具有以下样式:


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

问题是当面包屑列表长并换行时,箭头就会留在前一行。 显而易见的解决方案是将空间更改为non-breaking空间,但这不起作用:


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

它实际上将 &nbsp; 输出到屏幕上。

时间:

更新: PointedEars提到在所有css场景中正确的&nbsp; 代表
'a0' 表示空格是十六进制字符串的终止符,被转义序列吸收。 他进一步指出了这个权威的描述,它听起来像我描述和修复的问题的一个不错的解决方案。

你需要做的是使用转义的unicode 。 于CSS忽略你们过去被告知的;所以try,内 &nbsp; 相关 0a0 不是一个完美


content:'>a0 ';/* or */
content:'>000a0';/* because you'll find: */
content:'Noa0 Break';/* and */
content:'No000a0Break';/* becomes No&nbsp;Break as opposed to below */

特别使用 000a0 作为 &nbsp; 。 如果你尝试,如Mathieu和Millikin建议:


content:'No0a0Break'/* becomes No&#2571;reak */

它将转换成十六进制转义字符。 0 -9a-fA-F同样发生。

有一种方法来贴一个 nbsp - 打开字符表和复制字 160 。 但是,在这种情况下,我可能会用填充填充它,如下所示:


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

你可能需要设置面包屑 display:inline-block 或者某些东西,尽管。

例如:

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

考试:如果你想选择你的角色,我选择了"& #8620""& #x21ac"( 我们使用了 HEX val )


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

就是这样:

...