How to Use the CSS White-Space Property

See CSS: Tips and Tricks for similar articles.

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.

  1. You first need to know the values you can use with the white-space property and what they do. They are:
    PropertyCollapses Series of Spaces and/or Tabs in CodeCollapses Line Breaks in CodeWraps to Fit Containing Box
    normalYesYesYes
    preNoNoNo
    nowrapYesYesNo
  2. 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