CSS white-space Property

Beginner
6 min read
Updated: Oct 2026
3 examples
Live preview
CSS white-space property controlling spaces and line wrapping in text
Definition

Definition and Usage

The white-space property sets how spaces, tabs, and line breaks inside an element are handled — whether they collapse, stay as typed, and whether the text wraps.

It is inherited. The initial value is normal. To break long words, use overflow-wrap, word-break, or hyphens instead.

Baseline · Widely available.

Not deprecated. Core keywords work everywhere; some newer shorthand pairs and break-spaces need modern browsers.

Shorthand note:

Modern CSS treats white-space as a shorthand for white-space-collapse and text-wrap mode. The classic keywords (normal, pre, …) still work the same for everyday study.

Experimental:

white-space-trim is a related longhand in the spec and is not useful in browsers yet. Skip it for production.

Syntax

CSS Syntax

syntax.css
white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces;

Example: white-space: nowrap;

Values

Property Values

ValueDescriptionTry it
normalCollapse spaces; wrap as needed. Initial valueTry it
nowrapCollapse spaces; keep text on one lineTry it
prePreserve spaces and newlines; no wrapTry it
pre-wrapPreserve spaces and newlines; wrap when neededTry it
pre-lineCollapse spaces; keep newlines; wrap when neededTry it
break-spacesLike pre-wrap, but trailing spaces can cause wrapsTry it
initialResets to normalTry it
inheritTakes the parent’s white-spaceTry it
Approach

How to Use white-space

Decide if spaces should stay, then whether lines may wrap.

  1. Ask: should extra spaces collapse (normal / nowrap / pre-line) or stay (pre / pre-wrap)?
  2. Ask: should text wrap, or stay on one line (nowrap / pre)?
  3. Set white-space on the text container (often a paragraph, label, or code box).
  4. Pair with overflow or text-overflow when you use nowrap and need clipping or an ellipsis.
PieceRequired?Role
Text containerYesThe element whose whitespace you control
KeywordYesCollapse vs preserve, wrap vs no wrap
Narrow box—Makes wrap vs overflow easy to see
Try it

Live Preview

The sample has extra spaces and a line break. Change white-space and watch collapsing and wrapping.

Look for collapsed spaces, kept newlines, and whether long lines wrap inside the box.

Sample
Hello world. Line two here.

white-space: normal

Code

CSS Examples

Each snippet focuses on white-space. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

Example 1 — Keep Text on One Line

Collapse spaces, but never wrap to a new line.

CSS
<style>
  .label {
    white-space: nowrap;
  }
</style>

<p class="label">This label stays on one line.</p>
Try It Yourself

How It Works

  1. Collapse spaces. Extra spaces in the source still become one space.
  2. No wrapping. nowrap keeps the whole string on a single line.
  3. May overflow. In a narrow box the text can stick out unless you add overflow rules.
  4. Common use. Menu labels, table cells, and chips that must not break mid-word.

Example 2 — Preserve Spaces Like Code

Keep every space and newline; do not wrap long lines.

CSS
<style>
  .code {
    white-space: pre;
  }
</style>

<div class="code">a    b
c</div>
Try It Yourself

How It Works

  1. Spaces stay. The four spaces between a and b remain visible.
  2. Newlines stay. The break before c creates a second line.
  3. No soft wrap. Long lines overflow instead of wrapping.
  4. Like <pre>. Useful for code snippets without changing the HTML tag.

Example 3 — Keep Newlines, Collapse Spaces

Honor line breaks from the source, but tidy multiple spaces.

CSS
<style>
  .note {
    white-space: pre-line;
  }
</style>

<p class="note">Hello     world.
Second line.</p>
Try It Yourself

How It Works

  1. Spaces collapse. Hello world shows as one gap.
  2. Newlines remain. Second line starts on a new line.
  3. Still wraps. Long lines can wrap inside a narrow box.
  4. Handy for notes. Paste multi-line text without keeping every extra space.

Edge Cases & Pitfalls

If spacing or wrapping looks wrong, check these first.

a11y

nowrap can hurt zoom

Long unwrapped lines may force horizontal scrolling. Prefer wrapping for body text.

words

Does not break long words

Use overflow-wrap or word-break when URLs or long tokens overflow.

tabs

Tabs need preservation

With normal / nowrap / pre-line, tabs become spaces. Pair with tab-size when using pre or pre-wrap.

pre vs wrap

pre vs pre-wrap

Both keep formatting. Only pre-wrap (and break-spaces) soft-wraps inside the box.

html

Source newlines matter

Values that “preserve newlines” only keep breaks that exist in the HTML/text content.

Compatibility

Browser Support

white-space is a browser CSS property for text spacing and wrapping. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

white-space

Core values (normal, nowrap, pre, pre-wrap, pre-line) are supported in all major browsers. break-spaces and newer shorthand forms need modern engines.

97% Global support
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1+
Full support
Microsoft Edge 12+
Full support
Opera 4+
Full support
Samsung Internet 1+
Full support
Internet Explorer 5.5+
Core values
white-space Widely supported

Bottom line: Safe for everyday keywords. Treat break-spaces and multi-keyword shorthand as modern-only. This is not a JavaScript runtime API.

Remember

Key Takeaways

  • Two jobs: collapse/preserve whitespace, and allow/deny wrapping.
  • Default: normal collapses spaces and wraps text.
  • Code look: use pre or pre-wrap to keep formatting.
  • Inherited. Children follow the parent unless they set their own value.

One line: white-space decides whether spaces collapse and whether lines wrap.

Frequently Asked Questions

It controls how spaces, tabs, and line breaks inside an element are collapsed or preserved, and whether text wraps to the next line.
The initial value is normal: extra spaces collapse, and text wraps to fit the container.
Both collapse spaces, but nowrap keeps everything on one line. Text may overflow unless you also handle overflow.
Both preserve spaces and newlines. pre does not wrap long lines; pre-wrap wraps when the box is too narrow.
Yes. Setting it on a parent affects child text unless a child overrides it.
Core values are Baseline Widely available in all major browsers. Newer shorthand combinations and break-spaces have broader modern support. It is a browser CSS property, not a Node.js feature.

Next: width

Set the horizontal size of a box with the CSS width property.

width tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS visibility Property CSS width Property