white-space

The `white-space` CSS property determines how whitespace inside an element is handled.

Note: To make words break within themselves, use `overflow-wrap`, `word-break`, or `hyphens` instead.

Syntax

```/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

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

The `white-space` property is specified as a single keyword chosen from the list of values below.

Values

`normal`
Sequences of whitespace are collapsed. Newline characters in the source are handled the same as other whitespace. Lines are broken as necessary to fill line boxes.
`nowrap`
Collapses whitespace as for `normal`, but suppresses line breaks (text wrapping) within the source.
`pre`
Sequences of whitespace are preserved. Lines are only broken at newline characters in the source and at `<br>` elements.
`pre-wrap`
Sequences of whitespace are preserved. Lines are broken at newline characters, at `<br>`, and as necessary to fill line boxes.
`pre-line`
Sequences of whitespace are collapsed. Lines are broken at newline characters, at `<br>`, and as necessary to fill line boxes.

The following table summarizes the behavior of the various `white-space` values:

New lines Spaces and tabs Text wrapping
`normal` Collapse Collapse Wrap
`nowrap` Collapse Collapse No wrap
`pre` Preserve Preserve No wrap
`pre-wrap` Preserve Preserve Wrap
`pre-line` Preserve Collapse Wrap

Formal syntax

`normal | pre | nowrap | pre-wrap | pre-line`

Examples

Basic example

```code {
white-space: pre;
}```

Line breaks inside `<pre>` elements

```pre {
word-wrap: break-word;      /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap;      /* Modern browsers */
}```

See it in action

Source

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

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
```

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'white-space' in that specification.
Working Draft Precisely defines the breaking algorithms.
CSS Level 2 (Revision 1)
The definition of 'white-space' in that specification.
Recommendation Initial definition.

Initial value `normal` all elements yes visual as specified discrete the unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support11215.541
`pre`1121641
`pre-wrap`112

3

1 — 3.6

8183
`pre-line`1123.589.53
Support on `<textarea>`1 ?365.541
Support in SVG No ?36 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes ? ? ? ?
`pre` ? ? ? ? ? ? ?
`pre-wrap` ? ? ? ? ? ? ?
`pre-line` ? ? ? ? ? ? ?
Support on `<textarea>` ? ? ? ? ? ? ?
Support in SVG ? ? ? ? ? ? No

1. From Internet Explorer 5.5 to 7, `word-wrap: break-word;` can be used for line breaks in `pre` elements.