white-space
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Thewhite-spaceCSS property sets howwhite space inside an element is handled.
Try it
white-space: normal;white-space: pre;white-space: pre-wrap;white-space: pre-line;white-space: wrap;white-space: collapse;white-space: preserve nowrap;<section> <div> <p> But ere she from the church-door stepped She smiled and told us why: 'It was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and smiled, and passed it off Ere from the door she stept— </p> </div></section>#example-element { width: 16rem;}#example-element p { border: 1px solid #c5c5c5; padding: 0.75rem; text-align: left;}The property specifies two things:
- Whether and how white space iscollapsed.
- Whether and how lines wrap.
Note:To make words breakwithin themselves, useoverflow-wrap,word-break, orhyphens instead.
Constituent properties
This property is a shorthand for the following CSS properties:
Note:The spec defines a third constituent property:white-space-trim, which is not implemented in any browser yet.
Syntax
/* Single keyword values */white-space: normal;white-space: pre;white-space: pre-wrap;white-space: pre-line;/* white-space-collapse and text-wrap-mode shorthand values */white-space: nowrap;white-space: wrap;white-space: break-spaces;white-space: collapse;white-space: preserve nowrap;/* Global values */white-space: inherit;white-space: initial;white-space: revert;white-space: revert-layer;white-space: unset;Values
Thewhite-space property values can be specified as one or two keywords representing the values for thewhite-space-collapse andtext-wrap-mode properties, or the following special keywords:
normalSequences of white space arecollapsed. Newline characters in the source are handled the same as other white spaces. Lines are broken as necessary to fill line boxes. Equivalent to
collapse wrap.preSequences of white space are preserved. Lines are only broken at newline characters in the source and at
<br>elements. Equivalent topreserve nowrap.pre-wrapSequences of white space are preserved. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes. Equivalent topreserve wrap.pre-lineSequences of white space arecollapsed. Lines are broken at newline characters, at
<br>, and as necessary to fill line boxes. Equivalent topreserve-breaks wrap.
Note:Thewhite-space property as a shorthand is a relatively new feature (seebrowser compatibility). Originally, it had six keyword values; now, the valuenowrap is instead interpreted as a value fortext-wrap-mode, while the valuebreak-spaces is interpreted as a value forwhite-space-collapse. The above four keywords are still specific towhite-space, but they have longhand equivalents. The change to makewhite-space a shorthand expands acceptable values to even more keywords and combinations, such aswrap andcollapse.
The following table summarizes the behavior of these fourwhite-space keyword values:
| New lines | Spaces and tabs | Text wrapping | End-of-line spaces | End-of-line other space separators | |
|---|---|---|---|---|---|
normal | Collapse | Collapse | 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 |
A tab defaults to 8 spaces and can be configured using thetab-size property. In the case ofnormal,nowrap, andpre-line values, every tab is converted to a space (U+0020) character.
Note:There is a distinction made betweenspaces andother space separators. These are defined as follows:
- spaces
Spaces (U+0020), tabs (U+0009), and segment breaks (such as newlines).
- other space separators
All other space separators defined in Unicode, other than those already defined as spaces.
Where white space is said tohang, this can affect the size of the box when measured for intrinsic sizing.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Formal syntax
white-space =
normal|
pre|
pre-wrap|
pre-line|
<'white-space-collapse'>||<'text-wrap-mode'>||<'white-space-trim'>
<white-space-collapse> =
collapse|
discard|
preserve|
preserve-breaks|
preserve-spaces|
break-spaces
<text-wrap-mode> =
wrap|
nowrap
<white-space-trim> =
none|
discard-before||discard-after||discard-inner
Examples
Basic example
code { white-space: pre;}Line breaks inside <pre> elements
pre { white-space: pre-wrap;}In action
<div> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> }</div><div> <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></div>.box { width: 350px; padding: 16px;}#css-code { background-color: gainsboro; font-size: 16px; font-family: monospace;}#css-code select { font-family: inherit; width: 100px;}#results { background-color: rgb(230 230 230); overflow-x: scroll; white-space: normal; font-size: 14px;}const select = document.querySelector("#css-code select");const results = document.querySelector("#results p");select.addEventListener("change", (e) => { results.style.setProperty("white-space", e.target.value);});Controlling line wrapping in tables
HTML
<table> <tbody> <tr> <td></td> <td>Very long content that splits</td> <td>Very long content that don't split</td> </tr> <tr> <td>white-space:</td> <td>normal</td> <td>nowrap</td> </tr> </tbody></table>CSS
table { border-collapse: collapse; border: solid black 1px; width: 250px; height: 150px;}td { border: solid 1px black; text-align: center;}.nw { white-space: nowrap;}Result
Multiple lines in SVG text element
Thewhite-space CSS property can be used to create multiple lines in a<text> element, which does not wrap by default.
HTML
The text inside the<text> element needs to be split into multiple lines for the new lines to be detected. After the first line the rest need to have their whitespace removed.
<svg viewBox="0 0 320 150"> <text y="20" x="10">Here is an English paragraphthat is broken into multiple linesin the source code so that it canbe more easily read and editedin a text editor. </text></svg>CSS
text { white-space: break-spaces;}Result
Specifications
| Specification |
|---|
| CSS Text Module Level 4 # white-space-property |
| Scalable Vector Graphics (SVG) 2 # TextWhiteSpace |
Browser compatibility
See also
- Properties that define how words breakwithin themselves:
overflow-wrap,word-break,hyphens tab-size- Handling whitespace in CSS