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

Viewed 1141

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.

1 Answers

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>

Related