The white-space
CSS property sets how white space inside an element is handled.
Note: To make words break within themselves, use overflow-wrap
, word-break
, or hyphens
instead.
/* 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.
normal
nowrap
normal
, but suppresses line breaks (text wrapping) within the source.pre
<br>
elements.pre-wrap
<br>
, and as necessary to fill line boxes.pre-line
<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 |
normal | pre | nowrap | pre-wrap | pre-line
code { white-space: pre; }
<pre>
elementspre { word-wrap: break-word; /* IE 5.5-7 */ white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */ white-space: pre-wrap; /* Modern browsers */ }
<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>
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 |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 1 | 5.5 | 4 | 1 |
pre |
1 | 12 | 1 | 6 | 4 | 1 |
pre-wrap |
1 | 12 | 3
|
8
|
8 | 3 |
pre-line |
1 | 12 | 3.5 | 8 | 9.5 | 3 |
Support on <textarea>
|
1 | ? | 36 | 5.5 | 4 | 1 |
Support in SVG | No | ? | 36 | ? | ? | ? |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | Yes | ? | ? | ? | ? |
pre |
? | ? | ? | ? | ? | ? | ? |
pre-wrap |
? | ? | ? | ? | ? | ? | ? |
pre-line |
? | ? | ? | ? | ? | ? | ? |
Support on <textarea>
|
? | ? | ? | ? | ? | ? | ? |
Support in SVG | ? | ? | ? | ? | ? | ? | No |
overflow-wrap
, word-break
, hyphens
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space