Difference between overflow-wrap and word-break with examples

Generally we could use overflow-wrap and word-break properties to break he words where needed. We will demonstrate the difference here and explain the different use cases.

Overflow-wrap property

Basically we have two values for this property:

/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word;

Using normal the word might only breaks if it needed to when having a space between two word for example.

However with **break-word **as per MDN , to prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line. Have a look at this pen from CSS-tricks:

Once we toggle the button we clearly see that the break-word will be broken so that it can fit in the container and broken down to multiple lines.

Practically it can help the web pages from breaking down because of a long url or strings. A string of non-breaking space characters () would be treated the same way and would also break at an appropriate spot.

Word-break property

Actually word-break does similar thing to overflow-wrap. But we most commonly use it for non-English and mostly East Asian languages.

Based on CSS specification it specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).

Therefore word-break is great for  non-English content that requires specific word-breaking rules, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

/* Keyword values */ word-break: normal;  word-break: break-all;  word-break: keep-all; word-break: break-word;

According to MDN In contrast to word-break: break-word** and overflow-wrap: break-word** **, word-break: break-all **will create a break at the exact place where text would otherwise overflow its container

Here is a pen to demonstrate this:

As a result to make the word break at certain points. Also we will not have problems with non-English languages we better use overflow-wrap. Word-break will come as an alternative.

Thank you for reading.