white-space

Overview

W3C

Properties

background

background-attachment

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


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

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

Values
DOM
Example | Values | normal
Example | Values | nowrap
Example | Values | pre
Example | Values | pre-line
Example | Values | pre-wrap
Example | DOM
References


                                white-space: value;


Value:	Description:
inherit	Takes the same computed value as the property for the element's parent
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


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

<html>
  <head>
    <title>white-space</title>
  </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>
  <script type="text/javascript">
    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>
</html>

W3C Cascading Style Sheets, level 1

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

CSS

Values

DOM

Example | Values | normal

Example | Values | nowrap

Example | Values | pre

Example | Values | pre-line

Example | Values | pre-wrap

Example | DOM

References