CSS - Properties - word-break - break-word vs. break-all

The CSS property word-break specifies whether a break may occur within a word. I.e. between characters.

word-break: break-word
A word may be broken only if there are no acceptable break points on the current line.
word-break: break-all
A word may be broken at any character, regardless of the presence of other break points on the current line.

An example:

Original text

The value of PI, to 100 decimal places, is: 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679

The text overflows the parent container because there are no word break opportunities on the line (space, hyphen, etc.).

word-break: break-word
The value of PI, to 100 decimal places, is: 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679

break-word A word may be broken only if there are no acceptable break points on the current line.

Line 1. There is a valid breakpoint on this line (at the space character after the colon), so the long word (PI) will not be broken; it will be wrapped.

Line 2. There isn't a valid breakpoint on this line. The text will be broken mid-word.

word-break: break-all
The value of PI, to 100 decimal places, is: 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679

break-all A word may be broken at any point, regardless of other break points on the line.


Ads by Google


Ask a question, send a comment, or report a problem - click here to contact me.

© Richard McGrath