white-space

Definition

The white-space CSS property is used to control how white space characters are handled within an element’s content. It determines whether multiple white spaces are collapsed into a single space, whether lines can wrap, and how line breaks are treated.

The white-space property accepts several values:

• normal: This is the default value. Sequences of white spaces are collapsed into a single space. Line breaks are treated as a single space, and text will wrap to the next line when necessary.
• nowrap: White spaces are not collapsed, and text will not wrap to the next line. It will overflow the element’s boundaries if necessary.
• pre: Sequences of white spaces are preserved, and line breaks are treated as line breaks in the content. Text will only wrap if a line break is explicitly inserted.
• pre-wrap: Sequences of white spaces are preserved, and line breaks are treated as line breaks in the content. Text will wrap to the next line if necessary.
• pre-line: Sequences of white spaces are collapsed into a single space, and line breaks are treated as line breaks in the content. Text will wrap to the next line if necessary.

Here’s an example:

.text-element {
  white-space: nowrap;
}

In this example, the .text-element class sets the white-space property to nowrap. This prevents white spaces from collapsing and ensures that the text does not wrap to the next line. It will overflow the element if it exceeds the available width.

The white-space property can be useful when you want to control how white spaces and line breaks are rendered within an element, such as when displaying code snippets or preserving the formatting of text. It allows you to fine-tune the presentation of text content and adjust the wrapping behavior as needed.

Syntax

.label {
  white-space: nowrap;
}

Values

• normal: collapse whitespace and wrap as needed (default).
• nowrap: collapse whitespace but prevent wrapping.
• pre: preserve whitespace and line breaks.
• pre-wrap: preserve whitespace and wrap when necessary.
• pre-line: collapse spaces but keep hard line breaks.

Practical Examples

.label {
  white-space: nowrap;
}

Control wrapping behavior for badges, buttons, or code samples.

<div class="grid gap-4 sm:grid-cols-2 text-sm text-slate-700">
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="white-space: normal; max-width: 14rem;">Normal wrapping allows text to break onto multiple lines.</div>
  <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm" style="white-space: nowrap; max-width: 14rem;">No wrapping keeps the line intact even if it overflows.</div>
</div>

Tips & Best Practices

• Use pre-wrap for user-entered text where whitespace is meaningful.
• Pair with overflow: hidden or text-overflow when disabling wrapping.
• Remember that nowrap can cause layout overflow on small screens; add responsive variants.

Accessibility & UX Notes

Avoid forcing users to scroll horizontally; provide responsive breakpoints or alternative layouts.

Browser Support

Fully supported.

Related

• overflow-wrap and word-break for additional wrapping control.
• display: inline-block or flex for alignment adjustments.
• text-overflow when clipping overflowed text.