CSS white-space controls whether the browser collapses runs of HTML white space, preserves source line breaks, and wraps text at the edge of its container. The main choices are normal, nowrap, pre, pre-wrap, and pre-line.

Use the same sample to predict each result. The source contains two spaces between “Alpha” and “Beta,” followed by a source line break before “Gamma.”

What Does CSS white-space Do to a Text Sample?

The white-space property changes two related behaviors: how sequences of spaces and line breaks are rendered, and whether the browser may wrap text onto another line. It does not add visual spacing as a layout technique; it defines how existing text whitespace is interpreted.

Use this sample source throughout:

Sample source: Alpha Beta
Gamma

With the default behavior, the browser renders the sample as one space between “Alpha” and “Beta,” and the source line break does not create a new rendered line. Other values can preserve the two spaces, preserve the line break, prevent wrapping, or combine those behaviors.

How Does HTML white space Collapse by Default?

In ordinary HTML flow, adjacent spaces, tabs, and source line breaks are treated as collapsible whitespace. A sequence of these characters usually becomes one rendered space. Whitespace at the beginning or end of a line can also disappear.

That means this source:

Alpha Beta
Gamma

normally displays as “Alpha Beta Gamma.” The newline in the HTML source is not the same as an explicit line break element. To force a break in ordinary text, use an intentional break or a CSS value that preserves line breaks.

Wrapping is separate from collapsing. Even after several whitespace characters become one space, the browser can wrap the resulting text when the containing element is too narrow. The normal value enables both collapsing and wrapping.

When Should You Use white-space nowrap?

Use white-space nowrap when text must stay on one line, such as a compact navigation label, status badge, button caption, or table-cell value. The declaration is white-space: nowrap;.

nowrap collapses spaces and source line breaks like normal, but it prevents automatic wrapping. The sample therefore remains “Alpha Beta Gamma” on one line rather than breaking between words when the container narrows.

Preventing wrapping can cause overflow. A long label, URL, or generated value may extend beyond its container, become clipped, create horizontal scrolling, or push against adjacent content, depending on the element’s overflow rules. Check narrow screens and translated text before applying it broadly. If content must remain readable, allow wrapping or add a deliberate overflow strategy instead of hiding the excess.

How Does the white-space property Compare These Values: normal, nowrap, pre, pre-wrap, and pre-line?

These values produce predictable differences with the same sample:

• normal: Collapses repeated spaces and source line breaks, then allows wrapping. The sample becomes “Alpha Beta Gamma.”
• nowrap: Collapses repeated spaces and source line breaks, but prevents automatic wrapping. The sample stays on one line.
• pre: Preserves repeated spaces and line breaks, but prevents wrapping. The two-space gap remains, the break before “Gamma” remains, and long lines can overflow.
• pre-wrap: Preserves repeated spaces and line breaks while allowing wrapping. This keeps the sample’s formatting but lets long content move to additional lines.
• pre-line: Collapses repeated spaces but preserves source line breaks and allows wrapping. The gap becomes one space, while “Gamma” starts on its own line.

Choose normal for typical paragraphs, nowrap for short one-line UI text, pre for faithfully formatted content that may overflow, pre-wrap for formatted content that must remain readable in narrow containers, and pre-line when line breaks matter but repeated spacing does not.