Blank Space Examples

Blank Spaces

The default of browsers is to condense newlines and other empty spaces down to one blank space. We can use the "white-space" property to retain these spaces.

"pre" Example

The value "pre" stands for "preformatted". As you can see the newlines (we just made a newline!) a n d a n y e x t r a s p a c e s a r e d i s p l a y e d. As you can see, the text does NOT wrap to the next line.

Non-breaking Spaces Example

By default, browsers "wrap text". In other words, if a sentence does not fit on one line in the browser window, then it is "wrapped" to the next line (continued on the following line). To prevent this, we can set the value of the "pre" property to "nowrap". The "nowrap" value will prevent wrapping. The "nowrap" value will NOT preserve spaces. Instead, all extra blank spaces are reduced down to one space by the browser. The "nowrap" value is good for headers, which usually should be displayed on one line. However, the "nowrap" value is NOT good for paragraphs, as it might be annoying for the viewer to have to scroll way over to the right. Are you annoyed yet?


Click to validate the HTML code

Click to validate the CSS code