使用列计数和列间距（CSS3）时，Safari Mobile会剪切文本

下面是我使用的代码：

<ul>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
<li>TEXT<br>TEXT</li>
</ul>


ul {
    -webkit-column-count: 3;
    -webkit-column-gap: 90px;
    column-count: 3;
    column-gap: 90px;
    -moz-column-count: 3;
    -moz-column-gap: 90px;
}

文本
文本
文本
文本
文本
文本

保险商实验室{
-webkit列数：3；
-webkit柱间隙：90px；
列数：3；
柱间距：90px；
-moz列数：3；
-moz柱间距：90px；
}

问题是Safari Mobile在

被裁剪后会显示文本（其他浏览器没有问题..好吧，对于IE<10，我使用了一个肮脏的黑客，但我不在乎）。这是您可以复制该问题的页面：

这是Safari Mobile的屏幕截图：

---

巨大的列间距加上“空白：nowrap”导致内容超出了列。这导致了Mobile Safari中的剪辑错误

---

您需要减小列间距大小以适应文本，或者允许换行以解决问题。

较大的列间距加上“空白：nowrap”导致内容超出列。这导致了Mobile Safari中的剪辑错误

---

您需要减小列间距以适应文本，或者允许换行以解决此问题。

谢谢。我真的不知道我怎么会错过那个空白：nowrap！但奇怪的是，Safari Mobile呈现列表的方式有多不同。在桌面浏览器中，即使我缩放到与iPhone相同的分辨率，li也会显示在一行上。相反，在Safari Mobile上是这样的（这仍然解决了这个问题，只是出于好奇，我注意到了这一点）：哦，我在style.css-webkit文本大小调整：100%在#main:）中也解决了这个问题。我设置-webkit文本大小调整：正文上的文本大小调整为100%，而非#main.：）谢谢我真的不知道我怎么会错过那个空白：nowrap！但奇怪的是，Safari Mobile呈现列表的方式有多不同。在桌面浏览器中，即使我缩放到与iPhone相同的分辨率，li也会显示在一行上。相反，在Safari Mobile上是这样的（这仍然解决了这个问题，只是出于好奇，我注意到了这一点）：哦，我在style.css-webkit文本大小调整：100%在#main:）中也解决了这个问题。我设置-webkit文本大小调整：正文上的文本大小调整为100%，而非#main.：）