Midnight Cubicle

A simple but useful tip. If you want to preserve whitespaces in HTML documents without using    tag, you can achieve this by adding “white-space” property to the CSS style(s) of that element.

Lets see what exactly this “white-space” is?

The white-space property of CSS specifies how whitespace (spaces, tabs and hard returns) inside an element is handled. In XHTML, whitespace is collapsed. This means that multiple consecutive whitespace characters (spaces, tabs and hard returns) will be treated as a single space character. The white-space property can instruct Web browsers to change this behavior.

Properties : 

normal :   cause white space to collapse and provide line brakes where ever necessary.

pre:   prevent white spaces from collapsing and causes line to break only where new line characters are present in the code

nowrap:    causes white space to collapse but line to break only when new line character is encountered in the code.

pre-wrap:   prevent white spaces from collapsing and cause line to break where new line character is encountered or wherever else necessary for wrapping.

pre-line:   causes white spaces to wrap and line to break where new line character is encountered or wherever else necessary for wrapping.

Other Characteristics:

Value               :         normal |pre|nowrap|pre-wrap|pre-line |inherit

Default            :         normal

Applies to      :         all elements

Inherited       :         Yes

Media              :         Visual

Example:

<div style="white-space:pre-wrap;"></div>
<th style="white-space:nowrap;"></th>
<span style="white-space:pre-line;"></span>

Happy Coding……….