AI CSS White Space — Control Text Formatting and Space Collapsing

The CSS white-space property is one of those deceptively simple declarations that controls three different behaviors at once: whether spaces collapse, whether text wraps, and whether literal line breaks in your HTML are preserved. Getting it wrong means code snippets that lose their indentation, navigation links that break across lines, or preformatted text that overflows its container.

An AI CSS white-space generator lets you visualize each mode side by side, test with your own content, and export the exact declaration you need without memorizing the behavior matrix.

Understanding the White Space Modes

The white-space property controls three independent behaviors: whitespace collapsing, text wrapping, and newline handling. Each value combines these three behaviors differently:

/* Default: collapse spaces, wrap text, ignore newlines */
.normal { white-space: normal; }

/* Prevent all wrapping */
.nowrap { white-space: nowrap; }

/* Preserve everything: spaces, newlines, no wrapping */
.pre { white-space: pre; }

/* Preserve spaces and newlines, allow wrapping */
.pre-wrap { white-space: pre-wrap; }

/* Collapse spaces, preserve newlines, allow wrapping */
.pre-line { white-space: pre-line; }

The sixth value, break-spaces, behaves like pre-wrap but also allows line breaks at preserved spaces and does not collapse trailing whitespace at the end of lines.

When to Use Each Value

Normal: The Default

With white-space: normal, the browser collapses all consecutive whitespace into a single space, wraps text at the container boundary, and ignores literal newlines. This is what you want for paragraph text, headings, and most content.

Nowrap: Preventing Line Breaks

The nowrap value collapses spaces like normal but prevents text from wrapping. This is essential for horizontal navigation menus, badge labels, and any element where a line break would break the layout:

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

.badge {
  white-space: nowrap;
  display: inline-block;
  padding: 2px 8px;
}

Combine nowrap with text-overflow: ellipsis and overflow: hidden to truncate text that does not fit. This pattern is everywhere in modern UIs: sidebar labels, table cells, card titles, and notification banners. For more on text truncation techniques, see our CSS line-clamp guide.

Pre: Preserving Exact Formatting

The pre value preserves all whitespace exactly as written in the source, including spaces, tabs, and newlines. Text does not wrap. This is the behavior of the HTML <pre> element and is essential for displaying code blocks, ASCII art, or any content where spacing carries meaning:

.code-block {
  white-space: pre;
  font-family: 'SF Mono', 'Fira Code', monospace;
  overflow-x: auto;
}

The downside of pre is that long lines will overflow the container. Always pair it with overflow-x: auto to add a horizontal scrollbar when needed.

Pre-Wrap: The Best of Both Worlds

The pre-wrap value preserves whitespace and newlines like pre but also allows text to wrap at the container edge. This is the ideal choice for chat messages, user-generated content, and log output where you want to preserve intentional formatting while preventing horizontal overflow:

.chat-message {
  white-space: pre-wrap;
  word-break: break-word;
}

.log-output {
  white-space: pre-wrap;
  font-family: monospace;
  max-height: 400px;
  overflow-y: auto;
}

Pre-Line: Preserving Only Line Breaks

The pre-line value collapses consecutive spaces into one (like normal) but preserves literal newlines from the source. This is useful when you want to respect line breaks in user input without preserving extra spaces:

.user-bio {
  white-space: pre-line;
}

.poem {
  white-space: pre-line;
  text-align: center;
  font-style: italic;
}

This is a great choice for displaying content from a <textarea> where users press Enter to create paragraphs but you do not want to preserve their indentation or multiple spaces.

Practical Patterns and Recipes

Horizontal Scrolling Navigation

A common mobile pattern uses nowrap to create a horizontally scrollable row of tabs or filters:

.scroll-nav {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.scroll-nav::-webkit-scrollbar {
  display: none;
}

.scroll-nav a {
  display: inline-block;
  padding: 8px 16px;
}

This pattern works for tag lists, category filters, and any horizontal overflow layout. For more on responsive navigation patterns, check our Flexbox layout guide.

Code Display with Wrapping Option

Some code viewers let users toggle between scrolling and wrapping. You can implement this by switching between pre and pre-wrap:

.code-viewer {
  white-space: pre;
  overflow-x: auto;
}

.code-viewer.wrap-enabled {
  white-space: pre-wrap;
  word-break: break-all;
}

Tooltip and Popover Content

Tooltips often need nowrap for short labels but pre-wrap for multi-line descriptions:

.tooltip-short {
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip-multi {
  white-space: pre-wrap;
  max-width: 300px;
}

The CSS Text Module Level 4 Update

The CSS Text Module Level 4 specification introduces text-wrap-mode and text-space-collapse as more granular replacements for the white-space shorthand. While browser support is still evolving, the new properties separate wrapping control from space collapsing, giving you finer control:

/* Future: separate wrapping from space handling */
.future-syntax {
  text-wrap-mode: wrap;
  text-space-collapse: collapse;
}

/* Equivalent to white-space: pre-wrap */
.future-pre-wrap {
  text-wrap-mode: wrap;
  text-space-collapse: preserve;
}

For now, the white-space shorthand remains the practical choice with universal browser support. The AI CSS White Space Generator will help you pick the right value and preview its behavior in real time.

Common Mistakes to Avoid

• Using pre without overflow-x: auto causes horizontal page overflow on mobile devices
• Applying nowrap to flex children without min-width: 0 can prevent the flex container from shrinking
• Forgetting that pre-wrap preserves multiple spaces, which may look odd if your content has inconsistent spacing
• Using break-spaces when pre-wrap would suffice, since break-spaces has slightly less browser support

For related text handling properties, explore our guides on CSS hyphens, text-overflow ellipsis, and word-break strategies.

The AI CSS White Space Generator lets you experiment with every white-space mode using your own text. Toggle between values, resize the container, and copy the CSS you need for your project.