This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

white-space

Summary

The white-space property controls whether and how white space inside the element is collapsed, and whether lines may wrap at unforced “soft wrap” opportunities.

Overview table

Initial value
normal
Applies to
All elements
Inherited
Yes
Media
visual
Computed value
as specified
Animatable
No
CSS Object Model Property
whiteSpace

Syntax

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

Values

normal
This value prevents user agents from collapsing sequences of white space. Segment breaks such as line feeds and carriage returns are preserved as forced line breaks. Lines only break at forced line breaks; content that does not fit within the block container overflows it.
nowrap
Like normal, but content does not wrap to the next line.
pre
Line breaks and other whitespace are preserved.
pre-line
Like normal, this value collapses consecutive spaces and allows wrapping, but preserves segment breaks in the source as forced line breaks.
pre-wrap
Like pre, but allows wrapping (like normal's wrapping).

Examples

See the live example that has all the properties implemented side by side for comparison.

/**
 * white-space
 * CSS3 property
 * /docs/css/properties/white-space
 */

.white-space--nowrap {
  white-space:nowrap;
}

.white-space--normal {
  white-space:normal;
}

.white-space--pre {
  white-space:pre;
}

.white-space--pre-wrap {
  white-space:pre-wrap;
}

.white-space--pre-line {
  white-space:pre-wrap;
}

body {
  font-size: large;
  width: 500px;
}

p {
  background-color: #ddd;
}

View live example

Notes

Whitespace, such as line breaks, spaces, and tabs, is collapsed by default in HTML documents. You can use the nonbreaking space entity ( ) to add extra spaces to an object when the white-space property is set to normal or nowrap. You can add extra line breaks using the br element.

Related specifications

CSS Text Module Level 3
Working Draft

See also

Related pages

Attributions