white-space

The white-space property specifies how white space inside the element is handled.

Syntax
Values
DOM
Example | normal
Example | nowrap
Example | pre
Example | pre-line
Example | pre-wrap
Example | DOM
External

Syntax


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

Initial:	normal
Applies To:	all elements
Inherited:	yes
Percentages:	NA
Media:	visual

Values


            white-space: value

Value	Description
normal	Collapses sequences of white space and breaks lines as necessary to fill line boxes
nowrap	Collapses sequences of white space, but suppresses line breaks within text
pre	Prevents collapsing sequences of white space and breaks lines at newlines in the source, or at occurrences of "\A" in generated content
pre-line	Collapses sequences of white space and breaks lines at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes
pre-wrap	Prevents collapsing sequences of white space and breaks lines at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes

DOM


            [window.]document.getElementById("element-id").style.whiteSpace = "white-space";

Example | normal

Example | nowrap

Example | pre

Example | pre-line

Example | pre-wrap

Example | DOM

<!doctype html>
<!doctype html>
<html>
<head>
  <script>
    function mouseover1() {
      document.getElementById("id1").style.whiteSpace = "normal";
    }
    function mouseover2() {
      document.getElementById("id1").style.whiteSpace = "pre";
    }
    function mouseover3() {
      document.getElementById("id1").style.whiteSpace = "nowrap";
    }
    function mouseover4() {
      document.getElementById("id1").style.whiteSpace = "pre-wrap";
    }
    function mouseover5() {
      document.getElementById("id1").style.whiteSpace = "pre-line";
    }
  </script>
</head>
<body>
  <a href="/" onmouseover="mouseover1()">normal</a>
  <a href="/" onmouseover="mouseover2()">pre</a>
  <a href="/" onmouseover="mouseover3()">nowrap</a>
  <a href="/" onmouseover="mouseover4()">pre-wrap</a>
  <a href="/" onmouseover="mouseover5()">pre-line</a><br>
  <p id="id1">This  is    an      example        with          multiple            extra              spaces                and                  multiple                    extra 
line breaks

to show how extra                     white space and extra

line breaks are handled by the white-space property.</p>
</body>
</html>

External

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification