CSS Reference

"white-space" - css property (v. css 1)

  • To specify how white-space inside an element is handled.
  • Initial value: normal
  • The property is inherited
  • HTML usage: all elements
  • Browsers that support the white-space - property :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari

Possible white-space values:

value Comments CSS
normal This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes. 1
pre This value prevents user agents from collapsing sequences of white space. Lines are only broken at newlines in the source, or at occurrences of "\A" in generated content. 1
nowrap This value collapses white space as for 'normal', but suppresses line breaks within text. 1
pre-wrap This value prevents user agents from collapsing sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes. 2
pre-line This value directs user agents to collapse sequences of white space. Lines are broken at newlines in the source, at occurrences of "\A" in generated content, and as necessary to fill line boxes. 2
inherit Will inherit the value from parent specification. 2

Property "white-space" example:

<!DOCTYPE HTML >
<html  >
  <head>
    <title>Test</title>
    <style type="text/css">
      div {border: blue 1px solid; color:black;
           padding: 0.2em 0.2em 0.2em 0.4em; width: 400px;}
      .normal { white-space: normal;  }
      .pre { white-space: pre;  }
      .pre-line { white-space: pre-line;  }
    </style>
  </head>
  <body>
    <br>normal:<br>
    <div class="normal">This value directs user agents
      to collapse sequences of white space,
      and break lines as necessary to fill line boxes.
    </div>
    <br>pre:<br>
    <div class="pre">This value prevents user agents from
    collapsing sequences of white space.
    Lines are only broken at newlines in the source,
    or at occurrences of "\A" in generated content.
    </div>
    <br>pre-line:<br>
    <div class="pre-line">This value directs user agents to collapse
      sequences of white space. Lines are broken at newlines in the
      source, at occurrences of "\A" in generated content, and as
      necessary to fill line boxes.
    </div>
  </body>
</html>

Javascript access:

// To SET values ([o] is the target object)
[o].style.whiteSpace="white-space value"
// To GET values you must first get the computed style object
// To get that object in IE or Opera:
var cStyle=[o].currentStyle;
// To get that object in Firefox, Chrome or Safari (w3c-type):
var cStyle=window.getComputedStyle([o],null)
// To GET the property value:
var value=cStyle.whiteSpace;
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.