CSS Wrap ~ Bachelor Zone

CSS Wrap

Text wrap can be achieved in CSS using the white-space property. Common values of this property are as follows:

normal: This is the default. Consecutive white space characters are collapsed into a single white space. Line wraps when it becomes to long to fit the container's width.
nowrap: Line does not wrap even when it becomes too long to fit the container's width.
pre: This behaves like the <pre> tag in HTML. All formatting is "as is" for the text inside the <pre> </pre> tag, so there is no line wrapping.

Let's look at the examples below:

Example 1

div {
background-color:#FF00FF;
width:200px;
height:60px;
}
p {
white-space:normal;
}

The HTML code,

<div>
<p>This line shows the layout with white-space:normal.
</div>

renders

This line shows the layout with white-space:normal.

In Example 1, text wraps to the next line when it reaches the right edge of the pink box.

Example 2

div {
background-color:#FF00FF;
width:200px;
height:60px;
}
p {
white-space:nowrap;
}

The HTML code,

<div>
<p>This line shows the layout with white-space:nowrap.
</div>

renders

This line shows the layout with white-space:nowrap.

In Example 2, text does not wrap to the next line when it reaches the right edge of the pink box.

Example 3

div {
background-color:#FF00FF;
width:200px;
height:60px;
}
p {
white-space:pre;
}

The HTML code,

<div>
<p>
These two lines show the layout with ...
white-space:pre.
</div>

renders

These two lines show the layout with ...         white-space:pre. 

In Example 3, text is displayed exactly as how it was shown in the HTML document, and does not wrap to the next line when it reaches the right edge of the pink box.

Note that in CSS 3, two additional properties, text-wrap and word-wrap, can be used to control text wrap using CSS.