white-space property

Specifies a value that indicates whether lines are automatically broken inside the object.

Syntax

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

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

Property values

normal

Default. Lines of text break automatically. Content wraps to the next line if it exceeds the width of the object.

nowrap

Line breaks are suppressed. Content does not wrap to the next line.

pre

Line breaks and other whitespace are preserved. This possible value is supported starting in Internet Explorer 6 when the !DOCTYPE declaration specifies standards-compliant mode. When the !DOCTYPE declaration does not specify standards-compliant mode, you can retrieve this value, but it does not affect rendering—it functions like the normal value.

pre

Line breaks and other whitespace are preserved. When the !DOCTYPE declaration does not specify standards-compliant mode, you can retrieve this value, but it does not affect rendering—it functions like the normal value.

pre-line

Sequences of line breaks are preserved.

pre-line

Sequences of line breaks are preserved.

pre-wrap

Sequences of line breaks are collapsed.

pre-wrap

Sequences of line breaks are collapsed.

CSS information

Remarks

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.

This property affects content you access through the Document Object Model (DOM) the same way it affects the way Windows Internet Explorer displays the content.

Still in Internet Explorer 6, this property applies to the currentStyle element. The pre value of this property is now supported.

Windows Internet Explorer 8. The pre-line and pre-wrap values are used to control sequences of whitespace. A value of pre-line instructs Windows Internet Explorer to combine multiple line breaks into a single line, whereas pre-wrap wraps each newline onto a separate line. Inside a pre block, lines breaks occur at newlines in the source, at occurrences of "\A" in generated content (::before and ::after), and as necessary to fill line boxes.

Examples

The example below shows five identical paragraphs of text with extra spacing and line breaks throughout the paragraphs. Each paragraph shows a value for the white-space property and how it affects the white space in the paragraph.

<span>white-space: normal;</span>
<p id="normal">
Lorem ipsum dolor sit amet
   consectetuer    adipiscing   elit     sed   diam   nonummy   


nibh euismod tincidunt ut laoreet
</p>
<span>white-space: pre;</span>
<p id="pre">
Lorem ipsum dolor sit amet
   consectetuer    adipiscing   elit     sed   diam   nonummy   


nibh euismod tincidunt ut laoreet
</p>
<span>white-space: nowrap;</span>
<p id="nowrap">
Lorem ipsum dolor sit amet
   consectetuer    adipiscing   elit     sed   diam   nonummy   


nibh euismod tincidunt ut laoreet
</p>
<span>white-space: pre-wrap;</span>
<p id="pre-wrap">
Lorem ipsum dolor sit amet
   consectetuer    adipiscing   elit     sed   diam   nonummy   


nibh euismod tincidunt ut laoreet
</p>
<span>white-space: pre-line;</span>
<p id="pre-line">
Lorem ipsum dolor sit amet
   consectetuer    adipiscing   elit     sed   diam   nonummy   


nibh euismod tincidunt ut laoreet
</p>

In the CSS below, each of the paragraphs has a different value specified for the white-space property.

body {
   width: 300px;
}
p {
   background-color: #D6D6D6;
}
#normal{
   white-space: normal;
}
#pre{
   white-space: pre;
}
#nowrap{
   white-space: nowrap;
}
#pre-wrap{
   white-space: pre-wrap;
}
#pre-line{
   white-space: pre-line;
}

In the image below, you can see how the different values for white-space affect the white space within the paragraphs.

The following example shows how to set and retrieve the value of the white-space property. When the user sets the value of the white-space property of a div element, the value of the property is retrieved in a span element.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/whitespace_1.htm

<!DOCTYPE html>
<html>

<head>
  <title>whiteSpace property sample</title>
  <script>
    function fnSwitch() {
      oDiv.style.whiteSpace = event.srcElement.innerText;
      document.all.oSpan.innerText = oDiv.currentStyle.whiteSpace;
    }
  </script>
</head>

<body>
  <h1>whiteSpace Property Sample</h1>
  <p>This sample uses the <b>whiteSpace</b> property to control line breaks and 
    spaces between words in the object.</p>
  <p></p>
  <h2>whiteSpace: <span id="oSpan" style="color: red"></span></h2>
  <p>
    [ <a href="#" onclick="fnSwitch()">normal</a> |
    <a href="#" onclick="fnSwitch()">nowrap</a> |
    <a href="#" onclick="fnSwitch()">pre</a> ]
  </p>
  <div id="oDiv" style="background: #e4e4e4; padding: 10px; width: 400px;">
    In   the   source,   this   sentence   has   three   spaces   between   each   word.
    <br>
    This sentence 
        takes up three lines 
        in the source.
    <p>(The <strong>pre</strong> possible value is supported in Internet Explorer 6 and 
      later when the <strong>!DOCTYPE</strong> declaration specifies standards-compliant 
      mode.)</p>
  </div>
</body>

</html>

See also

:after

:before

CSSStyleDeclaration

currentStyle

style

Reference

pre

-ms-word-wrap

Other Resources

CSS Enhancements in Internet Explorer 6