Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

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

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

Sequences of line breaks are collapsed.

CSS information

Applies ToAll elements
Mediavisual
Inherited1
Initial Valuenormal

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.

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.

An image showing the different values for the white-space property

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

 

 

Show:
© 2014 Microsoft