🎯 What is white-space?

The white-space property defines how spaces, line breaks, and tabs inside an HTML element are handled by the browser.

In other words, it controls whether whitespace is preserved, collapsed, or wrapped to the next line.

p {
  white-space: pre;
}
                

➡️ In this example, text is displayed exactly as written, including spaces and line breaks.

Default value. Spaces are collapsed and text wraps automatically.

Spaces are collapsed, but text does not wrap and stays on a single line.

Preserves all spaces, tabs, and line breaks exactly as written.

p {
  white-space: pre;
}
                

➡️ Output keeps original formatting.

Line breaks are preserved, but extra spaces are collapsed.

Preserves both spaces and line breaks, but allows automatic wrapping.