The 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 :
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.