CSS white-space Property

What You’ll Learn

The white-space property controls how spaces, tabs, and line breaks are handled in text — from normal wrapping to fully preserved formatting.

Introduction

The white-space property in CSS is used to control how white space inside an element is handled. This includes spaces, tabs, and newline characters.

By using the white-space property, you can manage how text is displayed, whether it’s preserving spaces, wrapping lines, or collapsing whitespace.

Definition and Usage

Apply white-space when default browser text behavior is not what you need. Common scenarios include navigation labels that must stay on one line, code snippets that need indentation, and user-generated content with intentional line breaks.

📝 Syntax

The syntax for the white-space property is simple and can be applied to any element.

element {
  white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;
}

Here, the value can be one of several predefined keywords that dictate how white space is treated.

Basic Example

.code-snippet {
  white-space: pre-wrap;
  font-family: monospace;
}

Syntax Rules

• One keyword value at a time.
• Shorthand for two behaviors: space collapsing and line wrapping.
• nowrap is common for labels; pair with overflow and text-overflow when needed.
• pre-wrap is usually better than pre for responsive layouts.
• The property is inherited.

Related Properties

• word-break — controls breaking inside long words
• overflow-wrap (& word-wrap) — allows breaking long unbroken strings
• text-overflow — adds ellipsis when text overflows a nowrap box
• line-height — spacing between wrapped lines

🎯 Default Value

The default value of the white-space property is normal. This means that sequences of white space will collapse into a single space, and lines will wrap as necessary to fit within the block container.

💎 Property Values

The white-space property accepts keyword values that control space collapsing and line breaking.

When to Use white-space

white-space is helpful whenever default text flow is not enough:

• Navigation and buttons — Use nowrap so labels stay on one line.
• Code and logs — Use pre-wrap to keep indentation on small screens.
• Addresses and poetry — Use pre-line to respect line breaks without extra spaces.
• User comments — Preserve intentional formatting from pasted text.
• Tables and data — Prevent awkward wrapping in numeric columns with nowrap.

Examples Gallery

In this example, we’ll demonstrate how different values of the white-space property affect text display.

<style>
  .normal { white-space: normal; }
  .nowrap { white-space: nowrap; }
  .pre { white-space: pre; }
  .pre-wrap { white-space: pre-wrap; }
  .pre-line { white-space: pre-line; }
</style>

<div class="normal">Extra     spaces collapse.</div>
<div class="nowrap">Text stays on one line.</div>
<div class="pre-wrap">Preserves     formatting.</div>

.pill {
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
}

.code-block {
  white-space: pre-wrap;
  font-family: monospace;
}

function greet(name) {
  return "Hello, " + name;
}

.poem {
  white-space: pre-line;
  line-height: 1.7;
}

♿ Accessibility

• Avoid horizontal overflow — nowrap on long text can cause scrolling issues on mobile. Test with zoom and small screens.
• Do not hide meaning with wrapping — Ensure critical words are not cut off without a way to read the full text.
• Pair nowrap with ellipsis carefully — Truncated text should still be available in full via title attribute, expandable UI, or a detail view.
• Preserve readable line length — Even with pre-wrap, keep comfortable line-height and contrast for code blocks.

white-space + text-overflow

A common UI pattern for truncated labels combines three properties: white-space: nowrap, overflow: hidden, and text-overflow: ellipsis.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 12rem;
}

💡 Best Practices