CSS3多列内容溢出的策略答案

【问题标题】：Strategies for overflowing content in CSS3 multi-columnCSS3多列内容溢出的策略
【发布时间】：2017-08-28 00:52:14
【问题描述】：

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

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

【问题讨论】：

我发现这个问题很难理解，你能链接到你试图使流动的固定布局的例子吗？
这是一个 chrome 扩展，所以我不能直接链接到任何东西。虽然在 jsfiddle 中，它显示了一个长元素被切断，但我希望列宽扩大以显示它。

标签： css overflow css-multicolumn-layout

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

li {
word-wrap: break-word;
}

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

【讨论】：

感谢您的回答。但我希望它溢出，然后扩展内容。我认为可能不会在本地进行。