1

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!

user8600117
  • 11
  • 1
  • 2

3 Answers3

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>

enter image description here

Piyush Marvaniya
  • 2,496
  • 2
  • 16
  • 28
0

Try using overflow-wrap instead of word-wrap

Difference between overflow-wrap and word-break?

itodd
  • 2,278
  • 1
  • 14
  • 14
0

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

Filipos
  • 1