CSS Text Wrapping and Overflow – Complete Guide for Beginners

When building web pages, you will almost certainly encounter text that refuses to behave – long words breaking out of their container, overflowing horizontally, or ugly gaps in justified text. Understanding CSS text wrapping and overflow properties is essential for creating readable, responsive layouts. In this guide, you will learn every important property that controls how text wraps, breaks, and overflows, with practical examples you can try yourself.

Why Text Wrapping Matters

By default, browsers wrap text automatically at spaces. But real-world content includes long URLs, code snippets, single-word headers, or user-generated comments that can destroy your layout. CSS gives you fine-grained control using the white-space, word-break, overflow-wrap, and text-overflow properties. Let’s explore each one.

The white-space Property

The white-space property controls how whitespace (spaces, tabs, line breaks) is handled inside an element, and whether text can wrap.

• normal – Default. Sequences of whitespace are collapsed, and text wraps at spaces.
• nowrap – Whitespace is collapsed, but text never wraps; it continues on the same line until a <br> is encountered.
• pre – Whitespace is preserved exactly as in the HTML source, and text only wraps at line breaks (no automatic wrapping).
• pre-wrap – Whitespace is preserved, but text will also wrap automatically when it reaches the container edge.
• pre-line – Whitespace is collapsed, but line breaks in the source are preserved, and text wraps normally.

Here is a simple demonstration. Notice how nowrap forces the entire text into one line causing overflow:

The word-break Property

When a word is too long to fit in a line, word-break determines where the break occurs. It is especially useful for URLs or code.

• normal – Default. Breaks only at allowed break points (spaces or soft hyphens). Long words may overflow.
• break-all – Any character can be the break point, even inside a word. The word will be broken exactly at the container edge.
• keep-all – Only break at spaces or hyphens (CJK text uses its own rules). No breaking inside words.

Compare the behaviour on a very long word like “antidisestablishmentarianism”:

The overflow-wrap (formerly word-wrap) Property

While word-break breaks at any character, overflow-wrap only breaks a word if it cannot fit on its own line. It is more gentle.

• normal – Breaks only at breakable spaces.
• break-word – A word that is too long will be broken at an arbitrary point if no better break exists.

Pro tip: Use overflow-wrap: break-word for general content – it will only break words that are longer than the container, keeping your text natural.

The text-overflow Property

When text overflows its container and overflow is set to hidden, text-overflow determines how the overflow is signalled.

• clip – Overflow content is simply cut off.
• ellipsis – An ellipsis character (…) is displayed to indicate clipped text. Must be used with white-space: nowrap and overflow: hidden.

Combining Properties for Real-World UI

Often you need multiple properties to create truncation with