CSS white-space Property

The CSS white-space property is used to specify how the white space inside an element should be handled. In other words, this property is used to determine how the white spaces in the source code or markup of an element should be handled when the element is rendered on the page.

The initial value of CSS white-space property is normal. You can apply it to all elements. This property can be inherited which means all elements that are children of a given element will also have the same value for the white-space property as the parent element. The final computed value of the white-space property is the exact same value that you initially supplied. This property is not animatable.

Any sequence of spaces created using the space or the tab keys as well as a line break is considered white space.

Syntax

This is the formal syntax for using white-space property.

white-space: normal | pre | nowrap | pre-wrap | pre-line

Here are some examples of using this property.

/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;

Acceptable Values

normal

This is the default value of this property. In this case, extra spaces are collapsed into one. Moreover, new lines are stripped out and lines are broken and wrapped where necessary to fit inside their container.

For example, if there are two consecutive spaces between words in the actual markup, they will be collapsed into a single space when rendered on a webpage. Similarly, a tab will also be collapsed to a single space.

pre

In this case, sequences of white spaces and new lines are preserved. Moreover, lines will only break at the location of a newline character or a line break created using <br> elements in the source code.

nowrap

In this case, sequences of white spaces are collapsed into one just like the normal value. However, line breaks are not allowed within an element.

pre-wrap

In this case, the sequences of white spaces are preserved just pre. However, this value also allows line wrapping. This means lines will wrap when needed to fit into their container. In other words, lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

pre-line

In this case, the sequences of white spaces are collapsed into one but newline characters are preserved. In other words, lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

Working Examples

See the Pen CSS white-space Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

The CSS white-space property is supported in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer(8+), and on Android and iOS. However, the <textarea> elements started supporting this property only after Firefox version 36.

Further Reading

  1. Read more about the CSS <white-space> property on MDN.
  2. You can also read the CSS <white-space> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top