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

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.

Next Page: CSS Box-Shadow Property




Copyright © 2024   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact

AdBlock Detected!

Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.