Difference between pre-line and pre-wrap in CSS

aaron's profile image
By aaron

When using the white-space CSS rule, I have trouble remembering the difference between pre-line and pre-wrap. Here's the difference:

Both pre-line and pre-wrap will start a new line of text when there is a newline character, a <br> tag, or when the horizontal space fills up.

The difference between them is when you have multiple whitespace characters in a row. For example, when you have 3 newline characters in a row.

In such cases, pre-wrap will keep all of them and you will still have 3 newlines with the text wrapping at each one. However, pre-line will condense them down into just 1 newline character and then wrap once at that newline character.

If you are formatting text that was entered in a textarea, consider using pre-wrap, because when most people put text into a textarea, they expect the ability to put more space between paragraphs by pushing enter a few times, such as to give emphasis to some bit of text. Pre-line will remove those excess newlines, whereas pre-wrap will maintain them.

The other options for white-space are: normal, no-wrap, and pre.

#webdev

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Support the author

This author accepts donations via the services listed below. Your donation will help them continue to create great content!

* Lernabit doesn't take any of the money from your donation, but the donation services or payment processors might take a fee. These trademarks are the property of their respective owners.

Replies

Login or signup to leave a reply.

Signup Login
No more replies to show here