Is it possible to use newline character in CSS content property to force a line break? Something like:
figcaption:before
{
content: 'Figure \n' + attr(title);
}
Is it possible to use newline character in CSS content property to force a line break? Something like:
figcaption:before
{
content: 'Figure \n' + attr(title);
}
The content property accepts a string and:
A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a". This character represents the generic notion of "newline" in CSS.
(No idea about actual browser support.)
You can check Using character escapes in markup and CSS for reference about the escape syntax, which essentially is:
\20AC must be followed by a space if the next character is one of a-f, A-F, 0-9\0020AC must be 6 digits long, no space needed (but can be included)NOTE: use \00000a rather than just \A when escaping an arbitrary string, because if the newline is followed by a number or any character from [a-f] range, this may give an undesired result.
white-space property, yeah? Am I right?
– Saeed Neamati
Jan 30 '12 at 11:31
white-space is just a simple way to make line feeds visible.
– Álvaro González
Jan 30 '12 at 11:44
figcaption:before
{
content: 'Figure \a' attr(title);
white-space: pre;
}
Note that in the content attribute value, concatenation is expressed just by whitespace, not by a “+” sign. The escape notation \a in a CSS string literal indicates a linebreak character.
white-space: pre was missing. See jsfiddle.net/FP5gX where I added ' ' as you probably want that space.
– Jukka K. Korpela
Jan 30 '12 at 11:49
display,clearetc. This question asks how to put newlines/line-breaks within the generated content, which is what I want, and that can't be accomplished the same way. – Stephen P Aug 19 '15 at 23:29