CSS word-break does not work correctly in Microsoft edge

An alternative solution is to make use of the word-wrap property which IMHO behaves more 'intelligently' - meaning the word break will only be applied when the word is too long to fit into a line width, and won't be applied to words that can simply be moved in whole to the next line.

CSS:

word-wrap: break-word;

The word-wrap property is supported by most browsers and as of today I can certainly confirm it works in Microsoft Edge, IE11, Chrome, Firefox, Opera and Safari.

Note, word-wrap has now been renamed to overflow-wrap, with word-wrap now being an alternative name for that property, however overflow-wrap is not understood by Microsoft Edge so stick with using word-wrap for cross-browser compatability.

word-break: break-word is deprecated, and not supported by MS Edge or MS IE. See mozilla documentation about this.

word-break is supported by MS Edge and MS IE Here is a list of supported browsers.

Valid MS Edge and MS IE word-break properties are:

word-break: normal|break-all|keep-all|initial|inherit|unset;

---

Alternatively mozilla documentation specifies that overflow-wrap: break-word; acts the way that you want word-break: break-word to function.