1. Home
  2. How-to Articles
  3. How to Use the CSS White-Space Property

How to Use the CSS White-Space Property

  • google plus

In Brief...

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.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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
  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

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss