Javascript Reference - HTML DOM Style whiteSpace Property

The whiteSpace property sets or gets how to handle whitespace for text content.

Browser Support


`whiteSpace`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the whiteSpace property:

var v = object.style.whiteSpace

Set the whiteSpace property:

object.style.whiteSpace=normal|nowrap|pre|initial|inherit

Property Values

Value	Description
normal	collapse whitespace into a single whitespace. wrap text when necessary. This is default
nowrap	collapse whitespaces into a single whitespace. no text wrap.
pre	Layout text as <pre> tag
pre-line	collapse whitespace into a single whitespace. wrap text when necessary on line breaks
pre-wrap	preserve whitespace. wrap text on line breaks
initial	Set to default value
inherit	Inherit from parent element.

Technical Details

Default Value:	normal
Return Value:	A string representing white-space property
CSS Version	CSS1

Example

The following code shows how to turn off wrapping.


<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {<!--from  w  ww  . jav a 2 s .c  o  m-->
    width: 400px;
    height: 200px;
    background-color: blue;
    border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="myFunction()">test</button>

<div id="myDIV">
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. 
</div>

<script>
function myFunction() {
    document.getElementById("myDIV").style.whiteSpace = "nowrap";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the white-space property.


<!DOCTYPE html>
<html>
<body>
<!--from   ww w  .  j  a  v  a 2s .co m-->
<div id="myDiv" style="white-space:nowrap;">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br>

<button type="button" onclick="myFunction()">test</button>

<script>
function myFunction() {
    console.log(document.getElementById("myDiv").style.whiteSpace);
}
</script>

</body>
</html>

The code above is rendered as follows: