css - 使用 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 < 10，我使用了肮脏的 hack，但我不在乎）。这是您可以重现该问题的页面：http: //goo.gl/ojWx9

这是来自 Safari Mobile 的截图：

Answer 1

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

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