CSS word-break

The word-break property in CSS is used to specify how words should be broken and wrapped when they are too long to fit within their container.

There are several possible values for the word-break property:

• normal: Words break only at allowed break points (such as spaces or hyphens).
• break-all: Words break at any character, even in the middle, when a word is too long to fit.
• keep-all: Words break only at allowed break points, except for Chinese, Japanese, and Korean text where words are not broken at allowed break points.

Let's see some examples to better understand how the word-break property works:

In the example above, we have a container with a fixed width that contains text that is too long to fit within the container. The word-break property is applied to each paragraph to demonstrate the different behaviors.

The first paragraph has word-break: normal;, so the word breaks only at allowed break points. The second paragraph has word-break: break-all;, so the word breaks at any character. The third paragraph has word-break: keep-all;, so the word breaks only at allowed break points except for certain languages.

Experiment with different values of the word-break property to see how it affects the text wrapping in your own projects!