新行字符序列的 CSS’内容’属性？

是否有可能在 CSS content属性中使用 新线字符来强制换行? 比如:

figcaption:before
{
content: 'Figure \n' + attr(title);
}
110679 次浏览
小开
最佳答案

内容属性接受 绳子并且:

字符串不能直接包含换行符 字符串中，使用表示换行符的转义符 ISO-10646(U + 000A) ，例如“ A”或“00000a”。此字符 表示 CSS 中“ newline”的一般概念。

棘手的一点是要记住，HTML 默认折叠空白。

figure {
/* Avoid whitespace collapse to illustrate what works and what doesn't */
white-space: pre-wrap;
}


#first figcaption:before
{
/* \n is not a valid entity in this context */
content: 'Figure \n Chemistry';
display: block;
}


#second figcaption:before
{
content: 'Figure \A Chemistry';
display: block;
}
<figure id='first'>
<figcaption>Experiments</figcaption>
</figure>


<figure id='second'>
<figcaption>Experiments</figcaption>
</figure>

您可以检查 在标记和 CSS 中使用字符转义以参考有关转义语法的内容，其实质是:

  • 如果下一个字符是 A-F，A-F，0-9之一，则 \20AC后面必须跟一个空格
  • \0020AC必须是6位长，不需要空间(但可以包括在内)

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

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

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


提交答案