What is the use of the white-space property?
Using the CSS white-space Property
The white-space property in CSS controls how whitespace inside an element is handled. It affects text wrapping, line breaks, and whether sequences of spaces are collapsed or preserved.
- 1
normal: Collapses multiple spaces into one, and text wraps to the next line as needed (default behavior). - 2
nowrap: Collapses spaces but prevents text from wrapping to the next line. - 3
pre: Preserves spaces and line breaks exactly as in the source (like the<pre>element). - 4
pre-wrap: Preserves spaces and line breaks, but allows text to wrap to the next line if necessary. - 5
pre-line: Collapses multiple spaces into one but preserves line breaks.
Using white-space: pre ensures that spaces and line breaks in your text are rendered exactly as written in the HTML, which is useful for code snippets, poetry, or formatted text.
With pre-wrap, whitespace is preserved and long lines wrap within the container, combining the benefits of pre and normal wrapping behavior.
- 1
white-spacecontrols how spaces and line breaks are handled inside elements. - 2
Use
preorpre-wrapfor code blocks or preformatted text. - 3
Use
nowrapto prevent wrapping in menus, buttons, or inline labels. - 4
pre-lineis useful when you want line breaks preserved but still collapse extra spaces.