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

Interactive Demo

white-space: normal;

white-space: nowrap;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: break-spaces;

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
12	1	1	4	1

Tablets / Mobile
18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 31st December 2023