CSS Reference Property

word-break 471s1n

The word-break property determines if and how to break lines in the middle of words. 5d484v

Normally, lines that don’t fit inside their container break in certain points, specifically where there’s a white space or a hyphen. But when the word-break property is set to break-all, the browser will break lines at any point, even in the middle of a word that comes at the end of the line and that would be too long to fit inside the container.

The result of breaking lines in the middle of words will be close to that which we get when we justify text inside an element (see text-align), except that white space is not affected, so there may be lines where a white space would be existent between the last word on the line and the edge of the container.

The words broken at the end of each line by the word-break property become practically unreadable because there is no visual indication as to where the word has been broken.

A more readable and responsive alternative would be to use the hyphens entry pages.

Official Syntax 4j1l4a

  • Syntax:

    word-break: normal | break-all | keep-all
  • Initial: normal
  • Applies To: all elements
  • Animatable: no

Values 4w6m73

normal
Lines break according to their usual rules.
break-all
In addition to normal breaking rules, lines may break between any two letters (except where forbidden by the line-break property). Hyphenation is not applied.
This option is used mostly in a context where the text is predominantly using CJK characters with few non-CJK excerpts and it is desired that the text be better distributed on each line.
keep-all
Normal word breaks are suppressed in all characters including CJK languages. For non-CJK text, it is the same as the normal value.

Examples 3y6d6i

The following line will tell the browser to break lines in the middle of words when necessary to fit inside their container.

p {
  word-break: break-all;
}
                

The following line will prevent h1 elements from being broken in the middle of words:

h1 {
  break-word: none;
}
                

Browser s162l

CSS3 word-break 2r5345

Property to prevent or allow words to be broken over multiple lines between letters.

W3C Working Draft

ed from the following versions:

Desktop 1i5h4c

  • 44
  • 15
  • 5.5
  • 31
  • 9

Mobile / Tablet 1u2r2g

  • 9.0
  • 66
  • No
  • 66
  • 60

* denotes prefix required.

  • ed:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading g1037

Written by

Last updated June 11, 2020 at 10:55 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.