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.

CSS Word-Break Values

• Normal: It is the default value that allows word breaks only at breakpoints, such as hyphens and spaces.
• 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.
• Break-word: It is used to break the word when it reaches the end of a container.
• Initial: It sets the property to its default value.
• Inherit: It inherits the property from its parent element.

Examples of CSS Work-Break

To properly understand CSS word-break, we will use all CSS word-break values in the following examples.

Example 1:

In this example, we are going to use the "normal" value of CSS word-break.

Code:

Output:

Example 2:

In this example, we are going to use the "keep-all" value of CSS word-break.

Code:

Output:

Example 3:

In this example, we are going to use the "break-all" value of CSS word-break.

Code:

Output:

Example 4:

In this example, we are going to use the "word-break" value of CSS word-break.

Code:

Output:

Example 5:

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

Code:

Output:

Conclusion

In this article, we have learned about the CSS word-break property, which is used to break or wrap text when it reaches the end of the container. You have understood the examples of different values of CSS word-break, like normal, keep-all, break-all, and break-word.