在CSS3多列中溢出内容的策略

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

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

来源

2012-08-06 chustar

我发现这个问题很难理解，你能链接到你正在努力使流体的固定布局的例子吗？ – 2012-08-06 21:42:37

这是为了扩展铬，所以我不能直接链接到任何东西。虽然在jsfiddle中，它显示了一个长元素被切断，但我想要展开列宽以显示它。 – chustar 2012-08-06 22:35:59

我不认为有办法做到这一点，所以我回到我以前的解决方案，将结果分页到<div>s，然后让每个页面的大小尽可能地宽。

来源

2012-08-21 20:43:37 chustar

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

li { 
word-wrap: break-word; 
}

列宽可以设定不仅在像素，而且在％和EM，允许为更灵活的布局。为了防止内容完全崩溃，您当然会设置最小宽度。根据W3.org，延伸到列间隙（例如，长字或图像）的正常流中的内容被剪切到列间隙的中间。

来源

2012-08-07 19:45:20 gnitemouse

感谢您的回答。但我希望它溢出，然后扩大内容。我认为虽然可能不会在本地进行。 – chustar 2012-08-09 20:10:24

在CSS3多列中溢出内容的策略

回答

相关问题