overflow-wrap vs break-word

default

overflow-wrap: anywhere

overflow-wrap: break-word

word-break: break-all

word-break: keep-all

Observations

• default: Breaks line at an acceptable breaking point, if one exists.

• overflow-wrap: anywhere: Breaks line at an acceptable breaking point, if one exists. Otherwise, breaks the line at the end of the container.

• overflow-wrap: break-word: Breaks line at an acceptable breaking point, if one exists. Otherwise, breaks the line at the end of the container.

• Although overflow-wrap: anywhere and overflow-wrap: break-word behave the same in the experiments on this page, according to the MDN Web Docs and this SO answer, anywhere has a stronger line breaking behaviour. While the former will always force a line break before the edge of the container, the latter may not do so in some cases. However, for simple containers like the one on this page, both have the same effect.

• Firefox 139 considers slash (/) to be an acceptable breaking point but Safari 18.3 and Chrome 137 do not.

• word-break: break-all: Breaks line at the end of the container.

• word-break: keep-all: Prevents word-breaking in CJK text. Same as default for non-CJK text.

Deprecations

The following properties and vallues have been deprecated, so they have not been used in the experiments on this page:

• The word-wrap property was originally a non-standard Microsoft extension that has been superseded by the standard overflow-wrap property.

• The word-break: break-word value is deprecated. It is defined to have the same behaviour as overflow-wrap: anywhere.

References

• MDN: overflow-wrap
• MDN: word-break