5

Is there a way to make the content property in CSS span multiple lines with hard returns? This is just a matter of preference but I'm curious because I try to avoid longer lines of code for readability. JavaScript has the backslash method to span a string multiple lines. Is there a CSS equivalent?

/*/ / / / / / / / / / / / / / / / / / 80  CHARS / / / / / / / / / / / / / / /*/
html:before {
  content: 'I generally like to keep my lines of code below 80 characters in length';
}

html:before {
  content: 'I generally like to keep my lines of code 
  below 80 characters in length.';
}

The last CSS rule doesn't work because I broke up the string into multiple lines. Is there a way to keep the formatting with hard returns but have it work as intended?

EDIT : To be clear, I'm not asking how to enter a line break in the HTML output. This question is about formatting my raw CSS code.

Lynel Hudson
  • 2,335
  • 1
  • 18
  • 34

1 Answers1

7

JavaScript has the backslash method to span a string multiple lines. Is there a CSS equivalent?

Quite literally so:

html:before {
  content: 'I generally like to keep my lines of code \
below 80 characters in length.';
}

This is documented in section 4.3.7 of the spec, which says:

It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). For instance, the following two selectors are exactly the same:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}
Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356