使用列数和列间距（CSS3）时，Safari Mobile上的文本会被裁剪

Question

这里是我正在使用的代码：

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

问题是在Safari Mobile中<br>被裁剪后的文本（其他浏览器没问题..好吧，对于IE＆lt; 10我使用脏黑客但不关心它） 。这是您可以重现问题的页面： http://goo.gl/ojWx9

这是Safari Mobile的截图：

Answer 1

大柱间隙加上“white-space：nowrap”导致内容延伸到列之外。这会导致Mobile Safari中出现剪辑错误。

您需要缩小列间隙大小以适合文本或允许换行符来解决问题。