How do I style a "\n" using CSS?

Question

I want to style a \newline using css only-- in my text I have entries like this:

"Hello, this is the text and \nthere's more text hereasdf adf \nmore text here"

which should render like this:

Hello, this is the text and

there's more text here asdf adf

more text here

How do I change the styling of the escaped \newline using css (i.e. make the height 20px)? Can I do that since the \n isn't an html element?

Not the same as Line break in html with `\n` because I don't have a problem getting the \n in my document. I just want to change how it's displayed.

You cannot style the return but this sounds like a case for using `line-height` property. — BugsArePeopleToo, Jul 01 '19 at 15:55

score 4 · Accepted Answer · answered Jul 01 '19 at 15:55

4

You can't target specific characters in content.

You can target an element and make new line characters significant with the white-space property and you can change the line-height.

p {
  white-space: pre;
  line-height: 40px;
}

<p>Hello, this is the text and
there's more text here asdf adf
more text here</p>

answered Jul 01 '19 at 15:55

Quentin

Marking as correct because answered my question, there is no way to style the \n. The solution I ended up using was adding
which I could then style how i wanted. – jf1234 Jul 02 '19 at 16:37

1 Answers1