Widely availableUse it when default wrapping is not enough, especially for constrained UI and multilingual text.
Typography Widely available

word-break

The word-break property controls how words may break across lines. It is especially important for CJK text, long identifiers, and narrow layouts.

TypographyWrappingText

Overview

The word-break property controls how words may break across lines. It is especially important for CJK text, long identifiers, and narrow layouts.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
word-break
1
12
15
3
18
2
break-all
1
12
15
3
18
2
keep-all
44
12
15
9
44
9
normal
1
12
15
3
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
/* Allow line breaks between all characters */
.break-all {
  word-break: break-all;
}

/* Keep words together in CJK text */
.keep-all {
  word-break: keep-all;
}

Live demo

Normal(default)

word-break Normal(default) demo.

PreviewFullscreen

break-all

word-break Break-all demo.

PreviewFullscreen

keep-all（CJK）

word-break Keep-all(CJK) demo.

PreviewFullscreen

Use cases

  • Narrow mobile layouts

    Prevent long strings from breaking cards or tables when available width is limited.

  • Multilingual content

    Adjust line-breaking behavior for languages that have different expectations from Latin text.

Cautions

  • Overusing break-all can make Latin text significantly harder to scan.
  • Line-breaking rules should match the language and content type, not just the container width.

Accessibility

  • Readable line breaks matter for cognitive load and zoomed interfaces.
  • Choose break behavior that preserves comprehension instead of simply forcing text to fit.

Related links

Powered by web-features