CSS white-space Property


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
Applies to
All elements
Computed value
As specified
JavaScript syntax

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.


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


  • 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


<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.
.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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 31st December 2023