CSS White-Space Property

Whitespace, line breaks, spaces and tabs are collapsed by default in HTML documents. To add space, we can add “ ” which translates to space, to add some separation between elements. In addition <br/> or line breaks can also be utilized to add space. There is a HTML property called white-space which can be used to configure how the whitespace inside the element is displayed. The following is a list of whitespace options.

Syntax

<pre lang="html">/* 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;

Usage

<pre lang="css">p { white-space: normal }

white-space: normal

This is the default format. No breaks between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

white-space: nowrap

With nowrap, paragraph lines are extended out. No wrapping. No breaks between paragraphs.

white-space: pre-line

With pre-line, breaks are inserted between paragraphs. Paragraphs are wrapped.

The couple of examples above shows how elements can be styled using the white-space property.