word-wrap：断词不适用于 Safari 10.1 中的列表答案

【问题标题】：word-wrap: break-word not working on lists in Safari 10.1word-wrap：断词不适用于 Safari 10.1 中的列表
【发布时间】：2018-02-21 11:38:20
【问题描述】：

这是我非常具体的场景：自动换行：如果第一行溢出，则断词不适用于 Safari 10.1 中的列表。每隔一行都会正确中断。如果使用连字符，第一行将中断：auto。

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

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

截图： word-wrap: break-word in Safari 10.1

最坏的情况是我使用-webkit-hyphens:auto，但希望有人有更伪装的解决方案！

【问题讨论】：

标签： html css safari word-wrap

【解决方案1】：

分词：打破一切；

<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>

【讨论】：

【解决方案2】：

您可以将样式 hyphens:auto; 添加到您的 li 元素中。

【讨论】：

【解决方案3】：

尝试使用overflow-wrap 而不是word-wrap

Difference between overflow-wrap and word-break?

【讨论】：

没有骰子，第一行仍然没有换行。