Difference between pre-line and pre-wrap in CSS

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