CSS word-break does not work correctly in Microsoft edge

Question

It has come to my attention that in Microsoft Edge there is a problem with some css attributes, such as :

word-break: break-word;

Is there a way of fixing this or is there a way around this?

Answer 1

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.

Answer 2

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.

Answer 3

The thing is that you have to provide width for container/text in order to use word-break: break-word property. The only way to avoid this is to use unofficial WebKit/Blink only word-wrap: break-word property: https://caniuse.com/#search=word-break

Answer 4

It's also worth mentioning, that while word-break: break-word; is improper property , it's undocumented and non-standard property value in WebKit. This makes the word wrapping behave like word-wrap: break-word, but works with dynamic widths.