CSS Property white-space

white-space declares how whitespace is handled during layout.

Summary

Item	Value
Initial value	normal
Inherited	No.
Version	CSS1
JavaScript syntax	object.style.whiteSpace="pre"
Applies to	All elements.

CSS Syntax

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

Property Values

The property values are listed in the following table.

Value	Description
normal	Default value. Collapse to a single whitespace. Wrap text if necessary.
nowrap	Collapse to a single whitespace. Text not wrap to the next line.
pre	Preserve whitespace. Act as <pre> tag
pre-line	Collapse to a single whitespace. Wrap text on line breaks
pre-wrap	Preserve whitespace. Wrap text on line breaks
inherit	Inherit white-space property from parent element

Browser compatibility


`white-space`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use white-space CSS property.

<!DOCTYPE HTML>
<html>
<head>
  <style type="text/css">
    p {<!-- w ww. j av  a 2  s .c  om-->
      white-space: pre;
      margin: 0;
    }

  </style>
</head>
<body>
<div>
  <p>  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. this is a test. this is a test. 
  this is a test. </p>
</div>
</body>
</html>

Click to view the demo

Example 2

The following code demonstrates the whitespace property.

<!DOCTYPE HTML>
<html>
<head>
<style>
#mytext { width:  400px; margin: 5px;
    padding: 5px;
    border: medium double   black;
    background-color: lightgrey;
    white-space: pre-line;<!--from   w ww  .  ja  v a 2s. c  om-->
}
div.pre p {
    white-space: pre;
}
p {
    white-space: normal;
}

</style>
</head>
<body>
    <p id="mytext">
    This
      is
      a
      test;
    
    </p>
    <div class="pre">
        <h1>white-space: pre</h1>
        <p>  this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test.
        this is a test. this is a test. this is a test.
        this is a test. </p>
    </div>
    <p>  this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. this is a test. this is a test.
    this is a test. </p>
</body>
</html>

Click to view the demo