在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多列中溢出內容的策略

回答

相關問題