In white-space, what is the difference between pre, pre-line and pre-wrap options?

Question

I already know that when using white-space: nowrap, the text does not break when it exceeds the limit of a container. However, I noticed that this property in CSS has the options pre, pre-line and pre-wrap.

Of the last three, I would like to know the difference between one house. I would like some examples.

Answer 1

The difference between each of the values is basically how to treat spaces.

In HTML, when there are 2 or more spaces in the source code, the browser renders as only 1 space, and breaks the line of text in the source code is also treated as 1 space. For example:

<div>
   texto1    texto2
</div>

See above that between "texto1" and "texto2" has 4 spaces, but the browser only renders 1 space.

And here when one text comes below the other, this "line break in the source code" between "text1" and "text2" is treated with 1 space:

<div>
   texto1
   texto2
</div>

This is the default HTML. However, if you apply white-space: pre in the div above, all spaces are rendered as they are in the source code, including indentation spaces and line breaks, see:

div{
  white-space: pre;
}

<div>
   texto1
      texto2
</div>

It’s a kind of WYSIWYG (what you see is what you have).

In the case of pre-line is different. It deletes more than 1 space in only 1 space (which is normal in HTML) but keeps line breaks in the text as they are in the source code:

div{
  width: 100px;
  border: 1px solid #000;
  white-space: pre-line;
}

<div>
    Lorem     ipsum dolor
    sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

See above that between the words "Lorem" and "ipsum" has 5 spaces, but is rendered only 1 space. It keeps the line breaking of the source code before the text (between the <div> and the beginning of the text). Note that at the beginning of the text there is a blank line that is the space generated by the indentation of the text in the div.

In the case of pre-wrap, spaces are preserved as they are in the source code, including the space at the beginning of the container, generating a new line before the text, because of the space between <div> and the beginning of the text:

div{
  width: 100px;
  border: 1px solid #000;
  white-space: pre-wrap;
}

<div>
   Lorem     ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

In short:

pre

Keeps spaces and line breaks as they are in the source code.

pre-line

Keeps line breaks from source code and deletes more than 1 space in just 1.

pre-wrap

Same thing from pre-line, but keeps the spaces as they are in the source code, without deletion.

Answer 2

Taken from the Mozilla website (my translation with some modifications to increase understanding) (https://developer.mozilla.org/en-US/docs/Web/CSS/white-space):

Values of white-space:

• normal

  • Blank strings are broken. New line characters in HTML are treated the same as other blank spaces. Lines are broken as needed to fill the boxes.

• nowrap

  • Breaks blank spaces like normal, but represses line breaks in HTML.

• pre

  • Whitespace sequences are preserved. Lines are broken only in the new line characters at the source and in
    elements.

• pre-wrap

  • Whitespace sequences are preserved. Lines are broken with new line characters, with <br> and as necessary to fill the boxes.

• pre-line

  • Blank strings are broken. Lines are broken with new line characters, with <br> and as needed to fill the line boxes.

• break-spaces

  • Has identical behavior to pre-wrap, except that:

  • Any preserved blank space sequence always takes up space, including at the end of the line.

  • There is a line break opportunity after each blank character preserved, including between blank characters.

  • These preserved spaces occupy space and do not lock and therefore affect the intrinsic sizes of the box (minimum and maximum size).

More details on the website.