css - CSS3多列内容溢出的策略

Question

我正在尝试使用新的多列布局设置多列布局。但是无论如何允许创建列的灵活宽度？
我在网上看到的所有策略总是导致固定宽度的布局，即使内容溢出列也是如此。

ul {
    -webkit-column-width: 80px;
    height: 80px;
}

<ul>
    <li>element</li>
    <li>elementthat'stoolong</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
</ul>

JSFiddle 示例

Answer 1

我不认为有办法做到这一点，所以我回到我之前的解决方案，将结果分页到<div>s 中，然后将每个页面的大小设置为必要的宽度。

Answer 2

为防止文本溢出，请尝试：

li {
word-wrap: break-word;
}

列宽不仅可以设置为像素，还可以设置为 % 和 em，允许更灵活的布局。为了防止内容完全折叠，您当然会设置一个最小宽度。根据W3.org，正常流中延伸到列间隙中的内容（例如，长字或图像）被剪裁在列间隙的中间。