CSS“内容”属性中的换行符序列？ [复制]答案

【问题标题】：Newline character sequence in CSS 'content' property? [duplicate]CSS“内容”属性中的换行符序列？ [复制]
【发布时间】：2012-02-22 04:40:47
【问题描述】：

是否可以在 CSS content 属性中使用 newline 字符来强制换行？比如：

figcaption:before
{
    content: 'Figure \n' + attr(title);
}

【问题讨论】：

这个答案有帮助吗？ stackoverflow.com/a/4609491/582278
@Blowski，是的，但它在我的 fiddle 中不起作用
@SaeedNamati 在我的。你在看什么浏览器？
现在可以了。最后一个fiddle
这个问题不是the question indicated的重复问题。那一个询问如何在开始生成的内容之前创建一个中断之前，可以使用display、clear 等来完成。这个问题询问如何放置换行符/换行 within 生成的内容，这是我想要的，而不能以同样的方式完成。

标签： css

【解决方案1】：

content 属性接受 string 并且：

字符串不能直接包含换行符。在 a 中包含换行符字符串，使用表示换行符的转义符 ISO-10646 (U+000A)，例如“\A”或“\00000a”。这个角色表示 CSS 中“换行符”的通用概念。

（不知道实际的浏览器支持。）

您可以查看Using character escapes in markup and CSS 以获取有关转义语法的参考，其实质是：

注意：在转义任意字符串时使用\00000a 而不仅仅是\A，因为如果换行符后跟一个数字或[a-f] 范围内的任何字符，这可能会给出undesired result。

【讨论】：

【解决方案2】：

figcaption:before
{
    content: 'Figure \a' attr(title);
    white-space: pre;
}

请注意，在content 属性值中，连接仅由空格表示，而不是由“+”号表示。 CSS 字符串文字中的转义符号 \a 表示换行符。

【讨论】：

还是不行。更新fiddle
white-space: pre 丢失。请参阅jsfiddle.net/FP5gX，我在其中添加了' '，因为您可能想要那个空间。
@Jan 我们应该使用::before 还是:before？
我找到了“空白：pre-wrap;”工作得更好。
我想指出，您应该使用 CSS3 引入的双冒号表示法：developer.mozilla.org/en-US/docs/Web/CSS/::before，因为这是一个伪元素而不是伪选择器。