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

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]