White-space vs Word-break vs Overflow-wrap in CSS: Key Differences

The white-space property controls how spaces and line breaks inside text are handled. word-break decides if and how words can break onto the next line. overflow-wrap (formerly word-wrap) controls if long words can break to prevent overflow outside their container.

Quick Comparison

Here is a quick table summarizing the main differences between white-space, word-break, and overflow-wrap in CSS.

Property	Purpose	Controls	Common Values	Effect on Text
white-space	Controls how spaces and line breaks are handled	Spaces, tabs, line breaks	normal, nowrap, pre, pre-wrap, pre-line	Preserves or collapses whitespace and controls wrapping
word-break	Controls how words break at line edges	Word breaking rules	normal, break-all, keep-all, break-word	Allows or prevents breaking words to next line
overflow-wrap	Controls breaking long words to prevent overflow	Long word wrapping	normal, break-word	Breaks long words to fit container width

Key Differences

white-space manages how the browser treats spaces and line breaks inside text. For example, nowrap prevents text from wrapping to the next line, while pre preserves all spaces and line breaks exactly as in the source.

word-break focuses on where words can break when wrapping lines. break-all allows breaking words anywhere to avoid overflow, which can break words unnaturally. keep-all prevents word breaks in languages like Chinese or Japanese.

overflow-wrap (previously called word-wrap) is about breaking very long words or URLs that would otherwise overflow their container. Setting it to break-word forces these long words to break and wrap to the next line, improving layout stability.

Code Comparison

This example shows how white-space controls text wrapping and space preservation.

css

div {
  width: 200px;
  border: 1px solid #333;
  white-space: nowrap;
  background: #eef;
}

/* Text inside this div will not wrap and spaces are collapsed */

Output

A narrow box with a single line of text that does not wrap even if it overflows horizontally.

word-break Equivalent

This example uses word-break to allow breaking words anywhere to avoid overflow.

css

div {
  width: 200px;
  border: 1px solid #333;
  word-break: break-all;
  background: #efe;
}

/* Long words will break anywhere to fit inside the box */

Output

A narrow box where very long words break at any character to wrap inside the container.

When to Use Which

Choose white-space when you want to control how spaces and line breaks behave, such as preserving formatting or preventing wrapping.

Use word-break when you need to control how words break across lines, especially for languages or designs that require breaking words differently.

Pick overflow-wrap to handle very long words or URLs that might overflow their container, ensuring they break nicely to keep your layout intact.

Key Takeaways

white-space controls spaces and line breaks behavior inside text.

word-break controls where words can break to wrap lines.

overflow-wrap breaks long words to prevent overflow outside containers.

Use white-space for spacing control, word-break for word breaking rules, and overflow-wrap for long word wrapping.

Combining these properties helps create readable, well-wrapped text layouts.