Paragraphs & wrapping
word-break
word-break changes the rules for where lines may wrap. It can break English words mid-word or wrap Japanese at phrase boundaries.
Syntax
normal | break-all | keep-all | break-word | auto-phrasePreview
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
word-break: break-all;
}Controls
word-breakbreak-all
Open https://example.com/a/very/long/path to see more. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
normal: English wraps at spaces and hyphens, and Japanese between almost any two characters (while still keeping rules such as no "。" at the start of a line). This is the initial value.break-all: wraps between any two letters, even inside English words. Long alphanumeric strings no longer overflow narrow boxes, but ordinary words get cut in the middle too.keep-all: treats Japanese like English words and never wraps between its characters. Lines only wrap at spaces and punctuation, so Japanese with few punctuation marks overflows.auto-phrase: wraps Japanese at phrase boundaries, which avoids awkward breaks in headings. It only applies to text markedlang="ja".
auto-phrase is supported in Chrome and Edge (119+); Firefox and Safari drop the declaration, leaving normal. break-word is an old value that means the same as overflow-wrap: anywhere.
Compared with overflow-wrap
word-break: break-all lets every word break in the middle. To wrap only the long words and URLs that would overflow, overflow-wrap: anywhere is the better fit.