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.