CSS white-space: Syntax, Usage, and Examples

The white-space property in CSS controls how text handles spacing, wrapping, and line breaks within an element. It's particularly useful when formatting content that requires exact control over how it's displayed, such as code snippets, tables, inline blocks, or layouts where spacing and wrapping must follow strict rules. The CSS white space property lets you preserve, collapse, or completely prevent spaces and line breaks in your layout.

How to Use the CSS White Space Property

The syntax is simple:

selector {
  white-space: value;
}

The most commonly used values include:

• normal – Collapses white space (like default browser behavior). Text wraps automatically.
• nowrap – Collapses white space but prevents text wrapping.
• pre – Preserves white space and line breaks exactly as written in HTML.
• pre-wrap – Preserves white space and allows text wrapping.
• pre-line – Collapses white space but preserves line breaks.

Example:

p {
  white-space: pre-wrap;
}

This preserves line breaks from the HTML and wraps text to fit the container.

When to Use White Space CSS

The white-space property is a critical tool when you want fine-grained control over text formatting, spacing, and layout behavior.

Prevent Text Wrapping in a Button or Label

Sometimes you want a label or navigation item to stay on one line no matter the length:

.button {
  white-space: nowrap;
}

This forces the content to remain in a single line and helps prevent layout shifts or awkward wrapping in small containers.

Display Code Blocks or Preformatted Text

When you display user-entered text or code, it’s important to preserve all the spacing and formatting:

pre {
  white-space: pre;
  font-family: monospace;
}

This makes sure the spacing in your HTML matches what you see on screen.

Create Text That Preserves Indentation

For layouts that show indentation (like file structures or scripts), use:

.indented {
  white-space: pre-line;
}

This collapses spaces but still respects line breaks, keeping the structure readable without excessive spacing.

Examples of CSS White Space in Action

Keeping Text on One Line

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This combination keeps the text on a single line and adds an ellipsis (...) when the text overflows.

Multi-Line Descriptions That Preserve Breaks

.description {
  white-space: pre-wrap;
}

This keeps line breaks in your HTML content (like \n or <br>) and wraps text naturally inside the box.

Displaying Copy-Pasted Text Blocks

.copy-text {
  white-space: pre-wrap;
  background-color: #f4f4f4;
  padding: 1em;
}

When rendering multi-line user input, pre-wrap is often the best choice—it respects formatting and keeps text readable.

CSS White Space Nowrap for Menus or Tables

.menu-item {
  white-space: nowrap;
}

This ensures that long labels don’t break and keeps your menu looking clean.

td {
  white-space: nowrap;
}

This prevents cell content from breaking into multiple lines and is commonly used in compact tables.

Learn More About the CSS White Space Property

Full List of Values

Let’s look at what each white-space value does in more detail:

• normal: This is the default. Multiple spaces collapse into one, and text wraps automatically.
• nowrap: Collapses white space like normal, but text never wraps to the next line.
• pre: Preserves spaces and line breaks exactly as they appear in the source code. Text will not wrap.
• pre-wrap: Preserves both white space and line breaks while also allowing text to wrap when necessary.
• pre-line: Collapses white space but preserves line breaks.
• break-spaces: Similar to pre-wrap, but it forces wrapping opportunities after every preserved space. Less common but powerful in modern layouts.

Differences Between Pre, Pre-Wrap, and Pre-Line

Here's how the three most similar values behave:

• pre: Use when you want full preservation of space and breaks. No text wrapping occurs.
• pre-wrap: Use when you want to preserve formatting but allow text to wrap naturally.
• pre-line: Use when you only want to preserve line breaks but not spaces.

This helps you match user intent—especially when showing content like poems, code, chat messages, or markdown input.

Common Use Cases in Web Design

• Chat applications: Preserve line breaks from user input
• Markdown or forum posts: Respect user-entered spacing
• Tables or dashboards: Prevent text from wrapping and breaking layout
• Tooltips or labels: Use nowrap to keep text clean and concise

Combining White Space CSS with Overflow

Often, when using white-space: nowrap, you’ll also want to control how overflow is handled:

.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

This is common for mobile layouts or UI cards with long titles.

CSS White Space Property with Grid and Flexbox

Even in grid or flex layouts, you may want to override wrapping behavior:

.flex-label {
  flex: 1;
  white-space: nowrap;
}

This helps manage content alignment and keeps components from stretching awkwardly.

CSS White Space Nowrap for Buttons and Badges

In UI components where space is limited, preventing text from wrapping is essential:

.badge {
  white-space: nowrap;
  padding: 0.4em 0.8em;
  background: #eee;
  border-radius: 4px;
}

This ensures short UI elements stay tidy and don’t stretch vertically.

Considerations for Accessibility and UX

• Avoid using white-space: nowrap on long blocks of text—especially in body content—as it forces users to scroll horizontally.
• For screen reader users, preserving line breaks (via pre-line or pre-wrap) can improve clarity.
• Always test your formatting with a variety of screen sizes and devices to ensure your spacing choices don’t break readability.

The CSS white space property gives you fine control over how text behaves inside containers. Whether you’re preserving code formatting, building responsive navigation, or controlling wrapping in table cells, this property offers the flexibility to match content to design.