使用CSS内容添加HTML实体

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

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

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

---

你必须使用逃脱的unicode：

喜欢

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

更多信息：http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

---

CSS不是HTML。   是HTML中的命名字符引用; 相当于十进制数字字符引用  。 160是Unicode（或UCS-2;请参阅HTML 4.01规范）中的NO-BREAK SPACE字符的十进制代码点。 该代码点的十六进制表示是U + 00A0（160 = 10×161 + 0×160）。 你会发现在Unicode代码图和字符数据库。

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

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

只要转义序列的最后一个字符串值为最后一个字符就行。 如果字符出现，有两种方法可以避免误解：

a）（由他人提及）使用正好六个十六进制数字作为转义序列：

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

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

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

（由于f是一个十六进制数字， a0f在这里应该表示GURMUKHI LETTER EE ，或者ਏ如果您有合适的字体。）

分隔空白将被忽略，并且这将显示为foo ，其中这里显示的空间将是NO-BREAK SPACE字符。

白色空间方法（ 'a0 foo' ）比六位数方法（ '000a0foo' ）具有以下优点：

键入起来更容易 ，因为前导零不是必需的，数字不需要计数;

阅读起来比较容易 ，因为转义序列和后面的文本之间有空格，而数字不需要计数;

它需要更少的空间 ，因为前导零不是必需的;

它向上兼容 ，因为将来Unicode支持代码点超出U + 10FFFF将需要修改CSS规范。

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

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

- 或者说明确：

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

有关详细信息，请参阅CSS 2.1，“4.1.3字符和案例”一节。

---

更新 ：PointedEars提到，正确的立场是  在所有的CSS情况下会
'a0 '暗示该空格是十六进制字符串的终止符，并被转义序列吸收。 他进一步指出了这个权威的描述，这听起来像是我下面所描述和解决的问题的一个很好的解决方案。

你需要做的就是使用转义的unicode。 尽管你被告知0a0不是一个完美的替身  在CSS中; 所以试试：

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

特别使用000a0作为  。 如果你尝试，按照mathieu和millikin的建议：

content:'No0a0Break'   /* becomes No਋reak */

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

链接地址: http://www.djcxy.com/p/295.html

上一篇: Adding HTML entities using CSS content

下一篇: Why not use tables for layout in HTML?