When learning about White-Space for CSS the values Pre,Pre-line and pre-wrap brought a bit of confusion to me?

Question

Please if fine detail explain what each value does!

Answer 1

You know how we indent HTML to make it readable?
That means HTML has to ignore most whitespace otherwise it would show up on the page and look ugly.
The rule is that any amount of consecutive whitespace (space, newline, tabs, etc) is replaced with a single space. So "hello world" in your HTML shows as just "hello world" on the page.

"pre-line" makes it so newlines no longer collapse. So this:

hello world
how are you

in your HTML would usually show as "hello world how are you" but with `white-space: pre-line` it shows as:

hello world
how are you

`pre-wrap` is like `pre-line`, but also preserves other spaces. So "a b" doesn't collapse to "a b".

`pre` is like `pre-wrap`, but it stops the text from wrapping. If your lines of text are too long to fit on your screen, then, with `pre`, parts will be cut off on the right. `pre-wrap` and `pre-line` still insert a newline if you run out of space to the right.