How to Use the CSS White-Space Property

The white-space property determines how sequences of whitespace are displayed. You can learn how to use the CSS white-space property in just a few steps.

You first need to know the values you can use with the white-space property and what they do. They are:

Property	Collapses Series of Spaces and/or Tabs in Code	Collapses Line Breaks in Code	Wraps to Fit Containing Box
normal	Yes	Yes	Yes
pre	No	No	No
nowrap	Yes	Yes	No

Next, enter the code in the HTML, as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>White-Space</title>
</head>
<body>

<h1>White-Space</h1>

<div style="white-space: normal;">
	white-space: normal
	white-space: normal
	white-space: normal white-space: normal white-space: normal white-space: normal 
	white-space: normal white-space: normal
</div>
<hr>
<div style="white-space: nowrap;">
	white-space: nowrap
	white-space: nowrap
	white-space: nowrap white-space: nowrap white-space: nowrap white-space: nowrap 
	white-space: nowrap white-space: nowrap
</div>
<hr>
<div style="white-space: pre;">
	white-space: pre
		white-space: pre
			white-space: pre
</div>

</body>
</html>

This code renders the following:
White Space