CSS word-break property

CSS word-break

CSS word-break is used to specify whether the browser should break the word if it reaches the end of the line.

CSS word-break property values are normal, break-all, keep-all, break-word.

Normally, line breaks in text can only occur in certain spaces, like when there is a space or a hyphen.

CSS word-break property values are

  • normal : It specifies to use default line break rule.
  • break-all : It broke word at any character to prevent overflow.
  • keep-all : It doesnt allow word breaks for CJK (Chinese/Japanese/Korean) text. But for non CJK text it acts as normal value.
  • break-word : It broke word at random points to prevent overflow.

break-all value for css word-break property

It specifies to break at any character in order to prevent overflow.

Example

Try Yourself

keep-all value for css word-break property

It works similar to normal value, and it specifies not to use break for Chinese/Japanese/Korean (CJK) text.

Example

Try Yourself

break-word value for css word-break property

In order to prevent overflow words can be broken.

Example

Try Yourself