Javascript DOM CSS Style whiteSpace Property

Introduction

Specify that the text in the <div> element will never wrap:

document.getElementById("myDIV").style.whiteSpace = "nowrap";

Click the button to make sure that the text inside the DIV element never wraps:

View in separate window

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {/*  w ww  .j a va2s.c  o  m*/
  width: 400px;
  height: 200px;
  background-color: lightblue;
  border: 1px solid black;
}
</style>
</head>
<body>
<button onclick="myFunction()">Test</button>

<div id="myDIV">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

</div>

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

</body>
</html>

The whiteSpace property sets or gets how to handle tabs, line breaks and whitespace in a text.

Property Values

Value	Description
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. `default`
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.
pre	Whitespace is preserved by the browser. Acts like the <pre> tag in HTML
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The whiteSpace property returns a String representing how white-space inside an element is handled.

Previous Next