When you need to control how lines break on a web page, css text wrap is not a single setting but a family of related properties, each solving a different problem. This reference guide covers the main properties you will meet: overflow-wrap, word-break, white-space, and the newer text-wrap values balance and pretty. For each property you will find what it does, when to use it, when to avoid it, and how it interacts with the others, so you can pick the right tool instead of stacking rules and hoping for the best.
The properties in this guide overlap, which is why they cause confusion. Overflow-wrap and word-break both deal with long words, but they break them under different conditions. White-space controls whether wrapping happens at all, and also whether spaces and line breaks in your source are preserved. Text-wrap balance and pretty do not force breaks; they change how the browser chooses break points so the result looks better. Understanding those distinctions is the key to using css text wrap well, because the wrong property applied to the right problem can still produce a poor result.
CSS Text Wrap: Overflow-Wrap Explained
Overflow-wrap, formerly known as word-wrap, tells the browser whether it may break an otherwise unbreakable word when that word alone would overflow its container. Its normal value keeps the default behaviour: lines break at spaces, and a very long word is allowed to overflow rather than split. Its break-word value permits a break inside a long word, but only when that word would not fit on a line by itself. That conditional behaviour is what makes overflow-wrap the safest first choice for long strings.
In css text wrap practice, use overflow-wrap with break-word on elements that may contain long web addresses, file names, email-free identifiers, product codes, or user-submitted text that you cannot control. It is a defensive rule: in normal text it changes nothing, because ordinary words fit and break at spaces as usual, but it prevents the one long string that would otherwise break the layout. Apply it to the specific container that holds unpredictable content, such as a comment box, a card description, or a table cell, rather than to the whole document.
One caution: overflow-wrap only helps when the container has a definite width. If a container can grow without limit, the long word will simply stretch it, and no break will occur. That is why overflow-wrap works best alongside a flexible but bounded layout, where containers have a maximum width and the page itself cannot stretch sideways. Pair the property with a sensible layout and it quietly prevents a whole class of mobile overflow bugs.
CSS Text Wrap: Word-Break Explained
Word-break is the stronger, blunter cousin of overflow-wrap. Its break-all value allows breaks between any two characters, which means ordinary words will be split at the edge of the container even when they could have moved to the next line intact. That guarantees no overflow, but at a real cost to readability: paragraphs end up with words chopped in half at every line end, which is tiring to read and looks unpolished.
Because of that cost, break-all in css text wrap should be used sparingly, in places where breaking anywhere is genuinely acceptable. Examples include narrow table cells holding codes, data displays, or interfaces where space is extremely tight and exact content matters more than prose flow. For ordinary paragraphs, headings, and articles, break-all is almost always the wrong choice, and overflow-wrap with break-word will give you the overflow protection without the readability damage.
Word-break also has a keep-all value, which is mainly relevant to languages such as Chinese, Japanese and Korean, where word boundaries work differently from English. With keep-all, breaks between characters in those scripts are suppressed, so sequences stay together. Unless you are working with those languages, you are unlikely to need keep-all, but it is worth knowing it exists so you do not mistake it for a general wrapping control.
CSS Text Wrap: White-Space Explained
In css text wrap, white-space controls two things at once: whether lines wrap, and how spaces and line breaks in the source are treated. Its normal value gives the standard behaviour most pages rely on: sequences of spaces collapse to one, line breaks in the source are treated as spaces, and text wraps at the container edge. Its nowrap value stops wrapping entirely, so text stays on one line even if it overflows. That is useful for short labels and menu items that must not split, but dangerous for paragraphs, where it guarantees overflow on narrow screens.
The pre value preserves spaces and line breaks exactly as written, and does not wrap, which is why it suits code samples and preformatted text. The pre-wrap value also preserves spaces and breaks, but adds wrapping, making it a good choice for displaying user content where line breaks matter yet long lines should still wrap. The pre-line value collapses spaces but preserves line breaks, and wraps normally, which suits content such as addresses or poems where the author’s line breaks carry meaning. The table below compares the key values at a glance.
| White-space value | Wraps? | Preserves line breaks? | Best for |
|---|---|---|---|
| normal | Yes | No | Ordinary paragraphs and headings |
| nowrap | No | No | Short labels that must stay on one line |
| pre | No | Yes | Code samples and preformatted text |
| pre-wrap | Yes | Yes | User content where breaks matter |
| pre-line | Yes | Yes | Addresses, verse, and similar text |
| break-spaces | Yes | Yes | Preserved spaces that may also wrap |
A frequent bug comes from nowrap inherited from a parent element. A navigation style or a utility class may set nowrap on a container, and a paragraph inside it then refuses to wrap even though the paragraph itself has no wrapping style. When text will not wrap and no rule on the element itself explains it, check the parents. Overriding nowrap on the child restores normal wrapping without disturbing the parent’s intended use elsewhere.
CSS Text Wrap: Balance and Pretty Explained
In css text wrap, text-wrap with the value balance asks the browser to distribute words across lines more evenly, rather than filling each line as full as possible and leaving a short last line. It is designed for headings, captions, and other short blocks where a balanced shape looks better than a ragged one. A heading that would naturally fall as a long first line plus a single word on the second line may instead split into two lines of similar length, which reads more elegantly and avoids the lone-word effect.
Text-wrap with the value pretty goes further: it aims for a pleasing last line, avoiding a single word alone on the final line and avoiding a last line that is much shorter than the rest. Pretty is suited to longer blocks such as article paragraphs, where balance across the whole block would be expensive to compute and could shift too much text. Balance is best for short text; pretty is best for body text. Neither property forces or prevents breaks; they only influence where the browser chooses to break when it wraps normally.
Both css text wrap values are newer than the rest of this reference, so browser support is worth checking for your audience, and you should treat them as progressive enhancement. A page that uses balance or pretty should still read perfectly well in a browser that ignores the value and wraps normally. Use them to polish headings and paragraphs, not to fix overflow: if text is overflowing, the cause is a long string, a fixed width, or nowrap, and balance or pretty will not rescue it.
CSS Text Wrap: Combining Properties Safely
In practice, you will often combine properties, and the combinations matter. A common safe css text wrap combination for user-generated content is overflow-wrap with break-word plus normal white-space, which keeps natural wrapping and only splits words that would overflow. A card heading might combine balance with a flexible width, giving an even shape at every size. A code block might combine pre-wrap with overflow-wrap, preserving the author’s breaks while still wrapping very long lines instead of forcing sideways scrolling.
Combinations to avoid include break-all on prose, nowrap on paragraphs, and stacking every breaking property on the same element in the hope that one of them works. Stacked rules hide the real cause of a problem and make later maintenance harder, because nobody can tell which rule is doing the work. Pick the single property that matches the problem, test it at several widths, and only add a second property when you can name what it adds. For related text styling ideas, see the guide to colour and background for text and the Lucide CSS class names reference, and compare how other guides handle long strings in converting a table to text.
CSS Text Wrap: Choosing the Right Property
Use this decision sequence when you face a wrapping problem. First, ask whether the text wraps at all. If it does not, look for nowrap or a fixed width. Second, ask whether ordinary words wrap but one long string overflows. If so, overflow-wrap with break-word on that element is your answer. Third, ask whether the text wraps but looks unbalanced, with a lone word on the last line. If so, balance for a heading or pretty for a paragraph may polish it. Fourth, ask whether you are displaying code, addresses, or user content with meaningful line breaks. If so, choose the white-space value that preserves those breaks while still wrapping.
That sequence covers nearly every css text wrap situation a typical page presents, and it keeps you from reaching for the strongest rule first. Strong rules have visible side effects, while the gentler, targeted properties solve the problem without disturbing the rest of the page. Keep this reference beside you while you work, and css text wrap decisions will become quick and confident rather than trial and error.
CSS Text Wrap: Frequently Asked Questions
What is the difference between overflow-wrap and word-break?
Overflow-wrap with break-word only splits a word when that word alone would overflow its container, leaving normal text untouched. Word-break with break-all splits words at any point, which prevents overflow but harms readability, so it suits data displays rather than prose.
When should I use text-wrap balance?
Use balance on headings, captions, and other short blocks where an even distribution of words across lines looks better than a long first line plus a lone word. Treat it as polish for short text, not as a fix for overflow.
Why will my text not wrap at all?
Check for nowrap on the element or inherited from a parent, and check whether a fixed width or a long unbroken string is involved. Removing nowrap or allowing breaks on the long string usually restores normal wrapping.
Is text-wrap pretty safe to use?
Yes, as progressive enhancement. Browsers that support it will polish the last line of paragraphs, while browsers that do not will simply wrap normally, so the page remains fully readable either way.
Conclusion
The css text wrap family rewards a precise approach: overflow-wrap for long strings that would overflow, word-break used sparingly for data, white-space for controlling wrapping and preserved breaks, and balance or pretty for polishing line shapes. Learn what each property does, apply it narrowly to the element that needs it, and test at several widths before moving on. With this reference in hand, you can diagnose a wrapping problem in minutes, choose the gentlest property that solves it, and keep your pages readable on every screen. That confidence is the real payoff of understanding css text wrap as a set of distinct tools rather than a single mysterious setting.
