word-break

Lets words break at any point when they don’t fit on a line.

Initial value: normal
Inherited: Yes
Animatable: no
Applies to: all elements
JavaScript: element.style.wordBreak = "break-all"

On this page

Example
Definition and usage
Syntax
Values
Values in practice
Browser support
Good practices
Related entries

Example

CSS

.token {
  word-break: break-all;
  font-family: monospace;
}

Preview

Definition and usage

The word-break property determines where a line is allowed to break inside words. By default, in languages like English, lines only break at spaces and hyphens, so a very long string of characters can overflow its container.

break-all lets a word break between any two characters. This works well for long URLs, identifiers, and strings with no spaces, but it also breaks ordinary words in unexpected places.

In most cases overflow-wrap: anywhere is the better choice, since it only breaks a word when it truly doesn’t fit.

Syntax

word-break: normal | break-all | keep-all;

Values

normal
Breaking only at spaces. A long address overflows the box.
break-all
Breaking at any point, including inside ordinary words.
keep-all
For Chinese, Japanese, and Korean text: don’t break between characters.

Value	Description
normal	Breaking only at spaces. A long address overflows the box.
break-all	Breaking at any point, including inside ordinary words.
keep-all	For Chinese, Japanese, and Korean text: don’t break between characters.

Values in practice

normal

Breaking only at spaces. A long address overflows the box.

.demo { word-break: normal; }

break-all

Breaking at any point, including inside ordinary words.

.demo { word-break: break-all; }

keep-all

For Chinese, Japanese, and Korean text: don’t break between characters.

.demo { word-break: keep-all; }

Browser support

Widely available

Works in all modern browsers, phones included. You can use it without worry.

Chrome
Edge
Firefox
Safari

Good practices

For long addresses in text, overflow-wrap: anywhere is usually enough, and it doesn’t break ordinary words.
Keys, tokens, and hashes in code are a good place for break-all.

Related entries

Spotted a mistake or missing an example? Write to us.

Free lessonsPractice CSS in the HTML and CSS courseExercises with hints, a code editor and progress saved as you go.See the course