Definition and Usage

The white-space property specifies two behaviors. One is how white space inside an element is processed, and the other is whether line breaks are allowed at unforced soft wrap opportunities.

Here is a brief explanation of the term "white space."
White Space
White space refers to characters that create spacing between other characters in a sequence. In everyday usage, this is commonly known as "spacing."
White space includes the space entered by pressing the Space bar, the tab entered by pressing the Tab key, and the line breaks created when you press the Enter key.
White space improves text readability and helps align or arrange layout structures.

Using the white-space property allows you to control how the browser processes and renders white space—such as spaces, tabs, and line breaks—inside an element in the HTML source.

Basic Example

the example below, you can see how white space and line breaks written in the HTML source are processed based on the value of the white-space property.

HTML 
<p>
    Each value has its own behavior,
    which is applied according to the rules
    for processing white space and line breaks.
    This is some sample text.      This part has extra        spaces.
</p>
CSS 
p {
    background-color: gold;
    white-space: /* value */
}
CSS Live Demo: white-space Click the demo button below!

Constituent properties

The white-space property is a shorthand property that allows you to specify the following CSS properties at once.

Constituent properties of the white-space property
white-space-collapse Specifies how white space inside an element is processed.
text-wrap-mode Specifies whether unforced soft wraps are allowed where automatic line breaks may occur within the content of an element.

Note:
Although the specification defines a third constituent property, white-space-trim, it is not yet implemented in most browsers.

Formal syntax

CSS 
selector {
    white-space: normal | pre | pre-wrap | pre-line | <white-space-collapse> || <text-wrap-mode>
}

<white-space-collapse> = 
  collapse         |
  discard          |
  preserve         |
  preserve-breaks  |
  preserve-spaces  |
  break-spaces     

<text-wrap-mode> = 
  wrap    |
  nowrap

Syntax

CSS 
/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;

/* Shorthand values combining white-space-collapse and text-wrap-mode (two keywords) */
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Values

white-space property values can be specified using either a single keyword representing the value of white-space-collapse or text-wrap-mode, or a shorthand consisting of two keywords. You can also use special keywords provided for this property. When using two keywords, separate them with a space; the order does not matter.

Using the two-keyword shorthand is supported only in certain browsers. See Browser compatibility for details.

white-space 속성의 값
normal Initial value.
Consecutive spaces are collapsed into a single space. Line breaks in the source code (for example, pressing the Enter key) are treated the same as any other whitespace character.
Text automatically wraps when it reaches the edge of the content box, if needed (such as when a line becomes too long).
This value is equivalent to collapse wrap.
nowrap As with normal, consecutive spaces are collapsed, and line breaks in the source code (for example, pressing the Enter key) are treated as regular whitespace.
However, unlike normal, text does not wrap automatically when it reaches the edge of the content box.
pre This is the value browsers apply by default to the <pre> tag.
It behaves like a preview of the source code: consecutive spaces are preserved, and line breaks in the source (for example, pressing the Enter key) are kept exactly as written. No whitespace collapsing occurs.
Text does not wrap automatically at the content box edge. However, forced line breaks with <br> are still honored.
This value is equivalent to preserve nowrap.
pre-wrap This is the value browsers apply by default to the <textarea> tag.
It behaves exactly like pre, but—similar to normal—text automatically wraps when it reaches the edge of the content box.
This value is equivalent to preserve wrap.
pre-line This value preserves line breaks from the source code (for example, pressing the Enter key), similar to a preview.
It behaves like normal except that source-code line breaks are treated as forced line breaks rather than as regular whitespace. In other words, these line breaks are kept and not collapsed.
This value is equivalent to preserve-breaks wrap.
break-spaces This value behaves the same as pre-wrap, except for the following:
  • Consecutive spaces are not collapsed, even when they appear at the edge of the content box; they continue to occupy space.
  • However, even though consecutive spaces occupy space, they do not overflow beyond the content box boundary. This affects the intrinsic size of the content box (such as min-content or max-content sizes).
  • Automatic line-breaking opportunities may occur within or after consecutive spaces.

According to the specification, the initial value of the white-space property is normal.
However, most browsers assign different UA default values for certain HTML tags: the <pre> tag uses pre, and the <textarea> tag uses pre-wrap.

This table summarizes how each white-space property value is implemented.

Summary of How Each white-space Value Behaves
white-space Values Enter Space, Tab Text wrapping End-of-line spaces End-of-line other space separators
normal Collapse Collapse Wrap Remove Hang
nowrap Collapse Collapse No wrap Remove Hang
pre Preserve Preserve No wrap Preserve No wrap
pre-wrap Preserve Preserve Wrap Hang Hang
pre-line Preserve Collapse Wrap Remove Hang
break-spaces Preserve Preserve Wrap Wrap Wrap

Other space separators: All Unicode-defined space separator characters except those already defined as whitespace characters (for example, Enter, Space, and Tab).

Hanging (Hang): Indicates that the whitespace character does not trigger a line break even when it appears at the end of a line, effectively "hanging" at the line's edge.

Default value applied by browsers to the <pre> tag: pre

HTML 
<pre style="width:250px; background-color:gold;">
    Each value has its own behavior,
    which is applied according to the rules
    for processing white space and line breaks.
    This is some sample text.      This part has extra        spaces.
</pre>

Code Explanation
The <pre> tag is used to represent a block of text that preserves the author’s original formatting.
In other words, this tag displays indentation, line breaks, spaces, and other whitespace exactly as written.

Rendered Output

Default value applied by browsers to the <textarea> tag: pre-wrap

HTML 
<textarea style="width:250px; height:120px; background-color:gold;">
    Each value has its own behavior,
    which is applied according to the rules
    for processing white space and line breaks.
    This is some sample text.      This part has extra        spaces.
</textarea>
Rendered Output

Formal definition

Formal definition of the white-space property
Initial value normal
Applies to all elements
Inherited yes
Animatable no

Last updated: 2025-12-02

Browser Compatibility for the white-space Property and Its Values
Property and Value
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
white-space 1 12 1 1
break-spaces 76 79 69 13.1
collapse 114 114 124 18
normal 1 12 1 1
nowrap 1 12 1 1
pre 1 12 1 1
pre-line 1 12 3.5 3
pre-wrap 1 12 3 3
preserve 114 114 124 18
preserve-breaks 114 114 124 18
wrap 114 114 124 18
preserve-spaces Not supported Not supported 124 Not supported
Two-Keyword Shorthand Supported
(white-space-collapse and text-wrap-mode)		 114 114 124 Not supported
On SVG elements Not supported Not supported 36 Not supported

See more details on caniuse.com.

Specifications

Specification of the white-space Property
Specification
white-space CSS Text Module Level 4
#white-space-property
white-space-collapse CSS Text Module Level 4
#white-space-collapsing
text-wrap-mode CSS Text Module Level 4
#text-wrap-mode

References

See also