word-wrap: break-word not working on lists in Safari 10.1

Question

Here's my very specific scenario: word-wrap: break word is not working on lists in Safari 10.1 if the first line overflows. Every other line will break properly. The first line will break if with hyphens: auto.

jsfiddle: https://jsfiddle.net/3smrv3tk/

<ol class="test"><li>wrapwraaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaap</li></ol>

screenshot: word-wrap: break-word in Safari 10.1

The worst-case scenario is that I use -webkit-hyphens: auto, but hopefully someone has a more disguised solution!

Answer 1

Try using overflow-wrap instead of word-wrap

Difference between overflow-wrap and word-break?

Answer 2

You can add style hyphens:auto; to your li elements.

Answer 3

word-break: break-all;

 <div style="width: 100px;border: 1px solid red"> <ol class="test"><li>wrapwraaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaap</li></ol> </div> <br><br><br> it's Working Fine <br><br> <div style="width: 100px;border: 1px solid red"> <ol class="test"><li style="word-break: break-all;">wrapwraaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaap</li></ol> </div>