使用 column-count 和 column-gap (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 http://goo.gl/ojWx9

这是来自 Safari Mobile 的截图：

Answer 1

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

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