How to Use white-space in CSS: Syntax and Examples

Use the white-space CSS property to control how spaces, tabs, and line breaks inside an element are handled. It lets you decide if text wraps, preserves spaces, or stays on one line by setting values like normal, nowrap, or pre.

Syntax

The white-space property accepts several values to control text spacing and wrapping:

• normal: Collapses spaces and wraps text normally.
• nowrap: Collapses spaces but prevents wrapping; text stays on one line.
• pre: Preserves spaces and line breaks exactly as in the source.
• pre-wrap: Preserves spaces and line breaks but allows wrapping to fit container.
• pre-line: Collapses spaces but preserves line breaks.

css

white-space: normal | nowrap | pre | pre-wrap | pre-line;

Example

This example shows how different white-space values affect text inside boxes. Notice how spaces and line breaks behave differently.

html

html {
  font-family: Arial, sans-serif;
  padding: 1rem;
}
.container {
  border: 1px solid #333;
  padding: 1rem;
  margin-bottom: 1rem;
  width: 300px;
  background: #f9f9f9;
}
.normal {
  white-space: normal;
}
.nowrap {
  white-space: nowrap;
}
.pre {
  white-space: pre;
}
.pre-wrap {
  white-space: pre-wrap;
}
.pre-line {
  white-space: pre-line;
}

/* HTML content for demonstration */

<div class="container normal">
  <strong>white-space: normal</strong><br>
  This    is    some    text
  with multiple    spaces
  and line breaks.
</div>

<div class="container nowrap">
  <strong>white-space: nowrap</strong><br>
  This    is    some    text
  with multiple    spaces
  and line breaks.
</div>

<div class="container pre">
  <strong>white-space: pre</strong><br>
  This    is    some    text
  with multiple    spaces
  and line breaks.
</div>

<div class="container pre-wrap">
  <strong>white-space: pre-wrap</strong><br>
  This    is    some    text
  with multiple    spaces
  and line breaks.
</div>

<div class="container pre-line">
  <strong>white-space: pre-line</strong><br>
  This    is    some    text
  with multiple    spaces
  and line breaks.
</div>

Output

Five boxes each showing the same text but with different spacing and wrapping: normal collapses spaces and wraps, nowrap keeps text on one line, pre preserves spaces and line breaks exactly, pre-wrap preserves spaces and line breaks but wraps text, pre-line collapses spaces but preserves line breaks.

Common Pitfalls

Many beginners expect white-space to only affect spaces, but it also controls line breaks and wrapping. Common mistakes include:

• Using nowrap without a container wide enough, causing horizontal scrolling.
• Expecting pre to wrap text, but it does not wrap at all.
• Not realizing that normal collapses multiple spaces into one.

Always test how your text behaves on different screen sizes.

css

/* Wrong: nowrap causes overflow */
.container {
  width: 150px;
  white-space: nowrap;
  border: 1px solid red;
  overflow: auto;
}

/* Right: use pre-wrap to preserve spaces and wrap */
.container {
  width: 150px;
  white-space: pre-wrap;
  border: 1px solid green;
}

Quick Reference

Value	Effect
normal	Collapses spaces, wraps text normally
nowrap	Collapses spaces, no wrapping (one line)
pre	Preserves spaces and line breaks, no wrapping
pre-wrap	Preserves spaces and line breaks, wraps text
pre-line	Collapses spaces, preserves line breaks

Key Takeaways

Use white-space to control how spaces and line breaks behave inside text.

normal collapses spaces and wraps text; nowrap prevents wrapping.

pre preserves all spaces and line breaks exactly but does not wrap text.

pre-wrap is useful to keep spaces and line breaks while allowing wrapping.

Test text display on different screen sizes to avoid overflow or unexpected wrapping.