CSS white-space Property

Description

The white-space property sets how to display spaces between words. Under normal circumstances, any number of spaces in the HTML code appears as one on the web page. The exception is the <pre> element, the text placed in this container is displayed with all spaces, as it was formatted by the user. Thus, white-space imitates the work of <pre>, but unlike it, it does not change the font to monospaced..

Initial value
normal
Applies to
All elements
Inherited
Yes
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.whiteSpace

Syntax

white-space: normal | pre | nowrap | pre-wrap | pre-line

Values

  • normalSequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes.
  • preLine breaks and other whitespace are preserved.
  • nowrapLike normal, this value collapses white space; but like pre, it does not allow wrapping.
  • pre-lineLike normal, this value collapses consecutive spaces and allows wrapping, but preserves segment breaks in the source as forced line breaks.
  • pre-wrapLike pre, this value preserves white space; but like normal, it allows wrapping.
  • inherit

Example

<p class="test"> All spaces and line breaks are preserved
(text may go out of the designated area).
The value of the property acts as the &lt;pre&gt; element of the same name.
</p>
.test {
   white-space: pre; 
   width: 200px; 
   background-color: Tan;
}

Browser Support

The following table will show you the current browser support for the CSS white-space property.

Desktop
Edge Chrome Firefox Opera Safari
121141
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.1114.4

Last updated by CSSPortal on: 20th September 2023