Free • Interactive • All 6 values

CSS White-Space
Property Generator

Visualise every white-space value with live interactive demos, then build production-ready CSS that combines white-space, overflow-wrap, word-break, and text-overflow.

See Live Demos How it works

6

Values covered

3

Companion props

CSS

Output

Free

Price

⬜

Live white-space demos

Edit the sample text once and watch all 6 demo cards update instantly — see exactly how each value treats spaces, tabs, and newlines.

⚙️

Full CSS generator

Combine white-space with overflow-wrap, word-break, text-overflow, and overflow to build complete, copy-paste-ready CSS rules.

📚

In-depth education

Learn the difference between all 6 values, when to use each one, and how white-space interacts with word-break and overflow-wrap.

Interactive White-Space Demo

Edit the sample text below — all six cards update live to show how each value handles your text.

Sample text (edit to see differences across all cards)

normal

Sample text: with multiple spaces and a newline and leading indentation.

Collapses whitespace and wraps text at container width (browser default).

Best for: Body text, paragraphs, most UI text

white-space: normal;

nowrap

Sample text: with multiple spaces and a newline and leading indentation.

Collapses whitespace but prevents line wrapping — text stays on one line.

Best for: Badges, tags, button labels, table cells

white-space: nowrap;

pre

Sample text: with multiple spaces and a newline and leading indentation.

Preserves all whitespace and newlines; does not wrap.

Best for: Code blocks, preformatted output, ASCII art

white-space: pre;

pre-wrap

Sample text: with multiple spaces and a newline and leading indentation.

Preserves whitespace and newlines, and wraps when needed.

Best for: User-generated content, chat messages, markdown

white-space: pre-wrap;

pre-line

Sample text: with multiple spaces and a newline and leading indentation.

Collapses spaces/tabs but preserves newlines; wraps at container width.

Best for: Poems, lyrics, any content where line breaks matter

white-space: pre-line;

break-spaces

Sample text: with multiple spaces and a newline and leading indentation.

Like pre-wrap but trailing spaces at line ends also wrap and take space.

Best for: Specialised editors, exact whitespace rendering required

white-space: break-spaces;

CSS Generator

Combine white-space with companion properties to build a complete CSS rule.

white-space

overflow-wrap

word-break

overflow

text-overflow (needs overflow: hidden)

.element {
  white-space: normal;
}

What is the CSS white-space property?

The white-space CSS property is one of the most important yet frequently misunderstood properties in the CSS specification. It governs two entirely distinct but deeply interrelated aspects of how text is rendered inside an HTML element: whitespace collapsing and line-breaking behaviour. Understanding these two axes is the key to using the property correctly.

Whitespace collapsing refers to what the browser does when it encounters a sequence of whitespace characters — spaces, tabs, and non-breaking spaces — in the HTML source or in JavaScript-rendered text. By default (the normal value), browsers collapse any sequence of whitespace into a single space character. This is why writing multiple spaces in HTML produces only one visible space on screen. The pre, pre-wrap, and break-spaces values all disable this collapsing and preserve whitespace exactly as it appears in the source.

Line-breaking behaviour determines whether the browser is permitted to wrap text onto a new line when it runs out of horizontal space in its container, and whether explicit newline characters in the source create visual line breaks. With normal and nowrap, the browser ignores newline characters in the source (treating them as spaces). With pre, pre-wrap, pre-line, and break-spaces, explicit newlines in the source are respected and rendered as visual line breaks.

The property has been part of the CSS specification since CSS2 and is fully supported across all modern browsers. It applies to any HTML element — not just <pre> — which means you can attach whitespace-preserving behaviour to a <div>, a <span>, a table cell, or any other element. This flexibility makes it especially useful when rendering user-generated content, chat messages, code snippets, terminal output, or any situation where preserving the author's original spacing and line structure matters.

The browser default is white-space: normal. Most UI elements and body text use this default, which is why consecutive HTML spaces appear as a single space and text reflows to fill its container. When you need different behaviour — such as a scrollable code block, a single-line truncated label, or a chat bubble that preserves line breaks — you must explicitly set one of the other values.

White-space value reference table

A quick-reference comparison of all six values across the four key dimensions.

Value	Collapses whitespace	Preserves newlines	Allows wrapping	Best use case
`normal`	Yes	No	Yes	Default body text
`nowrap`	Yes	No	No	Badges, tags, single-line labels
`pre`	No	Yes	No	Code blocks, terminal output
`pre-wrap`	No	Yes	Yes	User content, chat, markdown
`pre-line`	Yes	Yes	Yes	Poems, lyrics, line-break content
`break-spaces`	No	Yes	Yes	Exact whitespace editors

white-space vs word-break vs overflow-wrap

These three CSS properties are frequently confused because they all influence how text behaves when it runs out of horizontal space. However, they operate at fundamentally different levels and control different things. Understanding the distinction allows you to combine them precisely to get exactly the behaviour you need.

white-space is the highest-level property. It controls whether wrapping is allowed at all, and whether whitespace characters and newlines are preserved. If you set white-space: nowrap, the browser will never wrap text, regardless of what word-break or overflow-wrap say. Think of it as a gate: it decides whether wrapping is on or off.

word-break controls where inside a word the browser is permitted to break. With word-break: normal, the browser only breaks at conventional soft-wrap opportunities — spaces, hyphens, and similar characters. With word-break: break-all, the browser may break between any two characters, even mid-syllable in the middle of an English word. With word-break: keep-all, Chinese, Japanese, and Korean (CJK) words are not broken, which mirrors how CJK text would be typeset in a print context. This property only matters when white-space allows wrapping.

overflow-wrap (historically called word-wrap) is a more conservative safety valve. With overflow-wrap: break-word, the browser will only force a mid-word break as a last resort — specifically, only if the word is so long that it would overflow the container even with all other wrap opportunities taken. overflow-wrap: anywhere is similar but also affects the minimum content size calculation, which can matter in flex and grid layouts. Most developers use overflow-wrap: break-word on containers that hold user-generated content (emails, comment bodies, form submissions) where long uninterrupted strings like URLs could overflow.

The practical combination for user content is: white-space: pre-wrap; overflow-wrap: break-word; — this preserves intentional line breaks and extra spaces, wraps long lines, and forces breaks on very long unbroken strings. For a single-line truncation label: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. For a code block: white-space: pre; overflow-x: auto; (or pre-wrap if you want soft-wrapping).

Why use this tool?

👁️

See before you ship

The side-by-side demo cards let you instantly see how different values render your actual text, so there are no surprises in production.

⚡

Instant code generation

Skip the MDN lookup. Select the values you need and the tool produces a complete, ready-to-paste CSS rule in seconds.

🔗

Companion properties included

white-space rarely lives alone. The generator covers overflow-wrap, word-break, text-overflow, and overflow so you get the full picture.

🔒

Fully private

Everything runs in your browser. No text you type is ever sent to a server. Your code and content stays yours.

📱

Works on any device

The responsive layout adapts to mobile, tablet, and desktop screens so you can use it wherever you work.

🎓

Learn as you go

Each demo card includes a plain-English description, a best-use note, and the exact CSS produced, so you learn the property as you use it.

How it works

01

Edit the sample text

Type or paste any text into the shared textarea at the top of the demo section. Use multiple spaces, tabs, and newlines to make the differences between values visible. All six demo cards update in real time.

02

Choose companion properties

In the CSS Generator, select your white-space value and optionally add overflow-wrap, word-break, text-overflow, and overflow. The tool assembles a complete .element { … } CSS rule as you change the dropdowns.

03

Copy and paste

Click "Copy CSS" to copy the generated rule to your clipboard, then paste it directly into your stylesheet. No reformatting needed — the output follows standard CSS conventions.

Best practices for white-space in CSS

Use pre-wrap for user-generated content. Whenever you display content that a person typed — a comment, a bio, a chat message, or a product description — reach for white-space: pre-wrap combined with overflow-wrap: break-word. This combination respects the line breaks your users intentionally inserted, preserves their formatting, wraps long lines so they never overflow the container, and handles URLs and long unspaced words gracefully. If you use white-space: normal instead, all of those line breaks disappear and the text collapses into a wall of prose, which often breaks the meaning or intent of what was written.

Use nowrap for badges, tags, and navigation links. Any UI element that should stay on a single line regardless of container width should be set to white-space: nowrap. This prevents embarrassing mid-word breaks on narrow screens. Common use cases include status badges (e.g., "In progress"), category tags, breadcrumb items, navigation links, and inline button labels. Pair it with overflow: hidden; text-overflow: ellipsis if the container has a max-width and you want graceful truncation instead of overflow.

Use pre for code blocks. The <pre> HTML element sets white-space: pre by default, which is exactly what you want for raw code samples where indentation and line length are semantically significant. If you want code that also soft-wraps for readability (for example in a mobile context), switch to white-space: pre-wrap. Most syntax-highlighting libraries handle this for you, but it is useful to know when implementing custom code renders.

Use overflow: hidden + text-overflow: ellipsis for single-line truncation. The classic CSS truncation pattern — white-space: nowrap; overflow: hidden; text-overflow: ellipsis — requires all three properties to work correctly. The nowrap keeps text on one line, overflow: hidden clips the overflow, and text-overflow: ellipsis replaces the clipped portion with "…". If any of the three is missing, the ellipsis will not appear. Note that this pattern requires the element to have a defined width (or be inside a flex/grid container that constrains its width).

Consider pre-line when newlines matter but extra spaces do not. If you have content where authors use manual line breaks for structure (poems, verse, bullet-style prose) but you do not want to preserve extra spaces or tabs, white-space: pre-line is a clean choice. It collapses multiple consecutive spaces as normal but treats \n characters as hard line breaks. This gives you the most important benefit of pre-wrap — preserved newlines — without the potential visual noise of preserved indentation or extra spaces.

Frequently asked questions

What does white-space do in CSS?

The CSS white-space property controls two distinct behaviours: how sequences of whitespace characters (spaces, tabs, non-breaking spaces) are handled, and whether and where text wraps onto new lines. By default, browsers collapse multiple spaces into one and automatically wrap text when it reaches the container edge. The white-space property lets you override both of these defaults independently or together, giving you fine-grained control over how your text renders regardless of what is in the source HTML.

What is the difference between pre and pre-wrap?

Both pre and pre-wrap preserve all whitespace characters and all newline characters in the source text. The difference is in wrapping behaviour. white-space: pre prevents the browser from wrapping long lines — text will overflow its container if it is too wide. white-space: pre-wrap preserves whitespace and newlines in the same way but allows the browser to introduce soft wrap opportunities so that very long lines still break to fit the container. For modern web use pre-wrap is almost always the better choice because it avoids horizontal scrollbars.

When should I use white-space: nowrap?

Use white-space: nowrap whenever you need text to stay on a single line regardless of container width. Common use cases include navigation links that must never break, badges and status tags in a data table, button labels, tab labels, and any piece of UI text where a mid-word or mid-phrase break would confuse the user or break a layout. Remember that nowrap can cause text to overflow its container, so combine it with overflow: hidden and text-overflow: ellipsis if you want graceful truncation.

How do I prevent text from overflowing with white-space: nowrap?

When you set white-space: nowrap, text will not wrap and can overflow its container. To prevent visible overflow, add overflow: hidden to the container. To show an ellipsis (…) where the text is cut off, also add text-overflow: ellipsis. The full combination is: white-space: nowrap; overflow: hidden; text-overflow: ellipsis. This three-property combo is the standard CSS single-line truncation pattern and is supported in all modern browsers.

What is the difference between white-space and word-break?

white-space controls whether the browser collapses whitespace and whether soft wrap opportunities exist at all. word-break controls where inside a word the browser is allowed to break if a wrap is needed. If white-space is set to nowrap, no wrapping happens regardless of word-break. If wrapping is allowed, word-break: break-all permits breaks inside any word (including mid-syllable), while word-break: keep-all prevents breaks inside CJK words. Think of white-space as the on/off switch for wrapping, and word-break as the fine-tuning of where within words breaks are allowed.

How do I preserve line breaks in CSS without using a pre element?

Set white-space: pre-wrap on the element. This preserves \n newline characters in the text content and also allows the browser to wrap long lines, making it safe for variable-width containers. If you only need to honour newlines and do not care about preserving extra spaces or tabs, use white-space: pre-line instead — it collapses consecutive spaces like normal but still respects newlines in the source. Both values work on any HTML element, not just pre.

What is the browser support for white-space values?

All six values covered by this tool have excellent browser support. normal, nowrap, pre, pre-wrap, and pre-line are supported in every browser released in the last decade and have essentially universal support (Chrome, Firefox, Safari, Edge, Opera, and their mobile equivalents). break-spaces was added in Chrome 76, Firefox 69, and Safari 13.1 (2019). All values can be used in production today without any vendor prefixes.

How do I create multi-line text truncation with CSS?

Single-line truncation uses white-space: nowrap; overflow: hidden; text-overflow: ellipsis. For multi-line truncation (clamping to N lines), the modern approach is: overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: N. Note that this approach does not require or conflict with the white-space property. The -webkit-line-clamp technique is supported in all modern browsers and is the recommended way to implement ellipsis after a set number of lines without JavaScript.

Related CSS tools

CSS Formatter

Beautify and format CSS code with proper indentation and spacing.

CSS Unminifier

Expand minified CSS into readable, formatted code instantly.

List Style Generator

Generate CSS list-style properties with a live visual preview.

HTML Element Builder

Build HTML elements with attributes and inline styles visually.