CSS white-space property sets how white space inside an element is handled.
Example
HTML Online Editor
<!DOCTYPE html>
<htmllang="en-US">
<head>
<style>
div{
border: 1pxsolidblack;
padding:10px;
width: 300px;
}
#point{
white-space: normal;
}
#point1{
white-space: nowrap;
}
#point2{
white-space: pre;
}
#point3{
white-space: pre-line;
}
#point3{
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1>CSS white-space Property</h1>
<h2>white-space: normal;</h2>
<divid="point">
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>
<h2>white-space: nowrap;</h2>
<divid="point1">
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>
<h2>white-space: pre;</h2>
<divid="point2">
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>
<h2>white-space: pre-line;</h2>
<divid="point3">
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>
<h2>white-space: pre-wrap;</h2>
<divid="point4">
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>
</body>
</html>
Default value for CSS white-space property is normal.
Property Value
The following table provides a list of values for CSS white-space property.
Value
Explanation
normal
Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
nowrap
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line.
pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
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.
Using JavaScript
In the following example, we will demonstrate how to change the CSS white-space property of an element using JavaScript.
Example
HTML Online Editor
<!DOCTYPE html>
<htmllang="en-US">
<head>
<style>
div{
padding: 10px;
border: 1pxsolid#000;
font-size: 17px;
width: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>CSS white-space Property</h1>
<div>
This is some text. This is some text. This is some text.
</div>
<buttononclick="myFunction()">Click Me</button>
<script>
varx=document.getElementsByTagName("div")[0];
functionmyFunction(){
x.style.whiteSpace="nowrap";
}
</script>
</body>
</html>
