References

Beginner-friendly references for web development, with live, editable examples.

The CSS white-space property

Property CSS All modern browsers Updated
Quick answer

The CSS white-space property controls how spaces, tabs and line breaks are treated, and whether text wraps. nowrap stops text wrapping to a new line; pre preserves whitespace and breaks exactly like a code block; pre-wrap preserves them but still wraps. The default, normal, collapses runs of whitespace and wraps as needed.

Overview

By default, browsers are tidy with whitespace: they collapse any run of spaces, tabs and newlines into a single space, and they wrap lines wherever needed to fit the box. That is the normal behavior, and it is why ten spaces in your HTML show up as one. white-space lets you change those rules when you need to.

The two values you will use most are nowrap and pre-wrap. nowrap keeps text on a single line no matter how narrow the container — handy for buttons, table cells or labels you never want to break, though it can cause horizontal overflow if the text is long. pre preserves your whitespace and line breaks exactly, the way a <pre> code block does, but does not wrap. pre-wrap is the best of both: it honors your spaces and newlines and still wraps to fit.

A neat combination is nowrap with overflow and text-overflow: ellipsis, which truncates a single line with a tidy "…" — the standard recipe for clipping a long title to one line.

Syntax

selector {
  white-space: nowrap;
}

/* truncate a long line with an ellipsis */
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Values

The white-space property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.

Value Description
normal Collapses runs of whitespace and wraps as needed. The default.
nowrap Collapses whitespace but never wraps — the text stays on one line.
pre Preserves whitespace and line breaks exactly. Does not wrap.
pre-wrap Preserves whitespace and breaks, and also wraps when needed.
pre-line Collapses runs of spaces but keeps your line breaks.

Example

Live example 
<style>
  div { font: 15px system-ui, sans-serif; background: #f5f7fb; padding: 10px 12px; border-radius: 8px; margin-bottom: 8px; max-width: 260px; }
  .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
<div class="clip">This long title is clipped to one line with a tidy ellipsis.</div>
<div>This one uses the default and wraps across as many lines as it needs.</div>

Best practices

  • Use nowrap for short labels, buttons and table headers you never want to break onto two lines.
  • Combine nowrap with overflow: hidden and text-overflow: ellipsis to clip a long single line cleanly.
  • Reach for pre-wrap when you need to preserve user-entered spacing and line breaks but still wrap to the container.
  • Watch out for horizontal scrolling: nowrap on long content can push the page wider than the screen.

Accessibility

Forcing text not to wrap can work against the WCAG reflow requirement, which expects content to adapt to a narrow viewport — or to large text — without forcing two-dimensional scrolling. A stubborn nowrap heading that runs off the side of a 320px screen is exactly the kind of thing that fails, so keep it to short strings.

If you truncate with an ellipsis, remember the cut-off text is hidden visually but the full text is still in the DOM for screen readers — good. Just make sure the important part is not the part being clipped, and consider showing the full value on focus or hover so sighted users can read it too.

Frequently asked questions

How do I stop text from wrapping in CSS?
Set white-space: nowrap on the element. The text then stays on one line. Be aware it can overflow its container if the text is long.
How do I preserve spaces and line breaks in CSS?
Use white-space: pre to keep them exactly (no wrapping), or pre-wrap to keep them while still wrapping to fit the box.
How do I add an ellipsis to truncated text?
Combine three properties: white-space: nowrap; overflow: hidden; text-overflow: ellipsis;. The line is clipped with a trailing "…".
What is the difference between pre and pre-wrap?
Both preserve your whitespace and line breaks, but pre does not wrap (long lines overflow), while pre-wrap wraps to fit the container.
visibility width