Word Wrap

Wrap text at a specific column width with word or character boundary options

What is it and how does it work?

Word wrapping controls how text is broken across lines when it exceeds the available width. The CSS `word-wrap` property (standardised as `overflow-wrap`) and `word-break` property have overlapping but distinct behaviours that confuse many developers. `overflow-wrap: break-word` allows breaking at arbitrary positions only when the word itself won't fit — it's the "safe" option. `word-break: break-all` breaks at any character boundary regardless of word boundaries — more aggressive. `word-break: keep-all` prevents breaks within CJK text.

This tool generates the correct CSS for your word-wrapping requirements and shows visual previews of how different combinations of `overflow-wrap`, `word-break`, `white-space`, and `hyphens` properties affect text rendering. It also covers the `-webkit-hyphens` vendor prefix for Safari compatibility and the `<wbr>` HTML tag for manually specifying word break opportunities.

Common use cases

• Long URL in prose: a URL like "https://example.com/very/long/path/to/document.pdf" in a paragraph needs `overflow-wrap: break-word` to prevent it from overflowing the container on narrow screens.
• User-generated content: a chat or comment box where users might paste long strings of characters without spaces needs `word-break: break-all` to prevent layout breaks.
• CJK text: Japanese or Chinese text (`word-break: keep-all`) preserves word units and uses proper line-break opportunities at punctuation rather than breaking mid-word.

Frequently asked questions

What is the difference between `word-wrap` and `overflow-wrap`?

`overflow-wrap` is the official CSS property name; `word-wrap` is the original non-standard name (first introduced by Microsoft IE). They are aliases — setting either one sets the same behaviour. Modern code should use `overflow-wrap`. The values are: `normal` (default, breaks only at allowed break points), `break-word` (break long words to prevent overflow), and `anywhere` (like break-word but can influence min-content sizing).

What is the difference between `word-break: break-all` and `overflow-wrap: break-word`?

`break-word` only breaks a word when the entire word won't fit on a line — it tries to keep words intact first. `break-all` breaks at any character position, even mid-word, regardless of fit. For most content, `overflow-wrap: break-word` is preferred because it produces more readable text. `word-break: break-all` is used when all characters must be treated equally (e.g., displaying code or random strings).

How do CSS hyphenation properties work?

The `hyphens` property controls automatic hyphenation. `hyphens: auto` requires a `lang` attribute on the HTML element and uses the browser's built-in hyphenation dictionary. Support varies: Chrome has limited English hyphenation; Firefox has broader support. `hyphens: manual` only hyphenates where you've placed `&shy;` (soft hyphen) or `<wbr>` in the HTML.

What is the `white-space` property and how does it interact with word-wrap?

`white-space` controls how whitespace and newlines in HTML are treated. `white-space: nowrap` prevents all line breaks (overriding word-wrap). `white-space: pre` preserves all whitespace and newlines like a `<pre>` tag. `white-space: pre-wrap` preserves whitespace but wraps lines when they overflow. For word-wrap to work, `white-space` must not be `nowrap` or `pre`.

Utility

Password Generator · QR Code Generator · Stopwatch · Countdown Timer · Calculator · Random Number Generator