CSS Wrap

CSS Tutorial  >  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

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

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

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.

Link to this page: If you find this page useful, we encourage you to link to this page. Simply copy and paste the code below to your website, blog, or profile.

<a href="http://www.1keydata.com/css-tutorial/wrap.php">CSS Wrap</a>