white-space
Decides how to treat spaces, line breaks, and line wrapping in text.
- Initial value
normal- Inherited
- Yes
- Animatable
- no
- Applies to
- all elements
- JavaScript
element.style.whiteSpace = "nowrap"
Example
#.message {
white-space: pre-line;
}<p class="message stage" style="white-space: pre-line; margin: 0;">Hi there!
Your assignment has been reviewed.
Score: 92%</p>Definition and usage
#By default, the browser collapses multiple spaces and newline characters in the code into a single space, and text wraps automatically. The white-space property lets you change that.
nowrap turns off wrapping, so the text stays on one line. pre preserves every space and newline exactly as written in the code, with no wrapping. pre-wrap also preserves them, but allows long lines to wrap, and pre-line preserves only the newlines.
white-space: nowrap together with overflow: hidden and text-overflow: ellipsis is the classic recipe for truncating text with an ellipsis.
Syntax
#white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;Values
#Values in practice
#normal
.demo { white-space: normal; }nowrap
.demo { white-space: nowrap; }pre
.demo { white-space: pre; }pre-wrap
.demo { white-space: pre-wrap; }pre-line
.demo { white-space: pre-line; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Display user-entered text, like a comment with line breaks, with
white-space: pre-line. - Protect buttons and labels that shouldn’t break onto two lines with
nowrap.
Related entries
#- text-overflowDecides how to mark text truncated at the end of a line, for example with an ellipsis.
- overflow-wrapBreaks long words only when they would otherwise overflow their container.
- word-breakLets words break at any point when they don’t fit on a line.
- overflowDecides what happens to content that doesn’t fit in an element.
Spotted a mistake or missing an example? Write to us.