CSS word-break property

This CSS property specifies how words should break at the end of the line. It defines the line break rules. Using this property, the lines that don't fit in the content box will break at a certain point.

Syntax

The default value of this property is normal. So, it is automatically used when we don't specify any value.

Values

keep-all: It breaks the word in the default style. It shouldn't be used for Japanese/Chinese/Korean (CJK) text.

break-all: It inserts the word-break between the characters in order to prevent the word overflow. When this value is applied, the browser will break the lines at any point. It can break the word from the middle if it is too long to fit and comes at the end of the line. It does not apply hyphens.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Example

In this example, there are three containers. We are applying the normal value to the first container's content, break-all value on the second container's content, and keep-all value on the third container's content.

Output