在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 Example

Answer 1

我认为没有办法做到这一点所以我回到了我以前的解决方案，将结果分页到<div> s，然后让每个页面的大小都根据需要调整。

Answer 2

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

li {
word-wrap: break-word;
}

列宽不仅可以设置为像素，还可以设置为％和em，从而实现更灵活的布局。要防止内容完全折叠，您当然会设置最小宽度。 根据{{​​3}}，延伸到列间隙（例如，长字或图像）的正常流中的内容被剪切在列间隙的中间。