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; white-space: break-spaces; /* 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.break-spaces
pre-wrap
, except that: The following table summarizes the behavior of the various white-space
values:
New lines | Spaces and tabs | Text wrapping | End-of-line spaces | |
---|---|---|---|---|
normal | Collapse | Collapse | Wrap | Remove |
nowrap | Collapse | Collapse | No wrap | Remove |
pre | Preserve | Preserve | No wrap | Preserve |
pre-wrap | Preserve | Preserve | Wrap | Hang |
pre-line | Preserve | Collapse | Wrap | Remove |
break-spaces | Preserve | Preserve | Wrap | Wrap |
Initial value | normal |
---|---|
Applies to | all elements |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
normal | pre | nowrap | pre-wrap | pre-line | break-spaces
code { white-space: pre; }
pre { word-wrap: break-word; /* IE 5.5-7 */ 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. |
Desktop | ||||||
---|---|---|---|---|---|---|
white-space |
1 | 12 | 1 | 5.5 | 4 | 1 |
break-spaces |
76 | 79 | 69 | No | 62 | 13.1 |
nowrap |
1 | 12 | 1 | 5.5 | 4 | 1 |
pre |
1 | 12 | 1 | 6 | 4 | 1 |
pre-line |
1 | 12 | 3.5 | 8 | 9.5 | 3 |
pre-wrap |
1 | 12 | 3
|
8
|
8 | 3 |
Support in SVG | No | 12 — 79 | 36 | 10 | No | No |
Support on <textarea>
|
1 | 12 | 36 | 5.5 | 4 | 1 |
Mobile | ||||||
---|---|---|---|---|---|---|
white-space |
1 | 18 | 4 | 10.1 | 1 | 1.0 |
break-spaces |
76 | 76 | No | 54 | 13.4 | 12.0 |
nowrap |
1 | 18 | 4 | 10.1 | 1 | 1.0 |
pre |
37 | 18 | 4 | 14 | 1 | 1.0 |
pre-line |
37 | 18 | 4 | 14 | 1 | 1.0 |
pre-wrap |
37 | 18 | 4 | 14 | 1 | 1.0 |
Support in SVG | No | No | 36 | No | No | No |
Support on <textarea>
|
37 | 18 | 36 | 14 | 1 | 1.0 |
overflow-wrap
, word-break
, hyphens
© 2005–2020 Mozilla 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