In this section, we will learn what the word-break property is and how to use it in CSS.

CSS word-break Property Definition and Usage

The CSS `word-break` property specifies how a word should break when it reaches the end of a line.

CSS word-break Property Syntax

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

CSS word-break Property Value

normal: This is the default value and it applies the default rules to breaking a word.

break-all: using this value means a word can be broken at any character to prevent overflow.

keep-all: Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value “normal”

break-word: using this value, a word may break at any point to prevent overflow.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: CSS text break

See the Pen CSS text break by Enjoy Tutorials (@enjoytutorials) on CodePen.