CSS'content'属性中的换行符字符序列?

Sae*_*ati 122 css

是否可以在CSS 属性中使用换行符content来强制行?就像是:

figcaption:before
{
    content: 'Figure \n' + attr(title);
}
Run Code Online (Sandbox Code Playgroud)

Juk*_*ela 141

figcaption:before
{
    content: 'Figure \a' attr(title);
    white-space: pre;
}
Run Code Online (Sandbox Code Playgroud)

请注意,在content属性值中,连接仅由空格表示,而不是由"+"符号表示.\aCSS字符串文字中的转义符号表示换行符.

  • 缺少'white-space:pre`.请参阅http://jsfiddle.net/FP5gX/,其中我添加了''',因为你可能想要那个空间. (13认同)
  • 我找到了"白色空间:预包装;" 工作得更好. (3认同)
  • 我想指出您应该使用 CSS3 引入的双冒号表示法:https://developer.mozilla.org/en-US/docs/Web/CSS/::before 因为这是一个伪元素而不是一个伪选择器。 (2认同)

Álv*_*lez 135

内容属性接受一个字符串和:

字符串不能直接包含换行符.要在字符串中包含换行符,请使用表示ISO-10646(U + 000A)中换行符的转义符,例如"\ A"或"\ 00000a".此字符表示CSS中"newline"的一般概念.

(不知道实际的浏览器支持.)

  • 请注意,以这种方式插入的换行符被视为HTML文档中的任何其他换行符:默认情况下,它们将被浏览器呈现为常规空格字符,并且仅作为预格式化内容中的常规换行符. (35认同)
  • 那你还应该包括`white-space`属性,是吗?我对吗? (16认同)
  • @SaeedNeamati - 它确实:http://jsfiddle.net/q4WC4/1/ (8认同)
  • @SaeedNeamati - 关键是关于@ BoltClock的评论.使用`white-space`只是一种简单的方式来使换行可见. (6认同)
  • 如果 `content: attr(some-attr)` 例如 `some-attr="foo \A bar"` 则这不起作用。关于在这种情况下该怎么做有什么想法吗? (3认同)