如何強制我的CSS3列僅在換行符處打破？

Question

我目前正在一個頁面上使用一堆表單頁面，也實現了CSS3列的一堆字段集。

問題是列的換行方式有時在打開下一列時有時會留下半個字段集。

關於我實際工作的項目，我正在盯着Chrome 15中的字段集圖例，該字段與一列底部的字母的上半部分和字母的下半部分拼接成一半在下一列的頂部。在Firefox 7中，我沒有看到這個問題（也許他們已經在換行符或塊元素之後打破了）。

我不認爲這是一個Chome特定的錯誤，我認爲它只是沒有說明它應該如何完成，或者什麼。

無論如何，我想明確告訴所有支持列的瀏覽器在這些字段集之間切入。謝謝。

我做了一個模型的情況。看到這個jsFiddle。 （顯然看起來比我上述項目，但同樣的錯誤有點不同。）

Answer 1

看起來像WebKit的已實施column-break-inside，您可以添加到fieldset規則來阻止它跨列分裂他們

fieldset { 
    border: 1px solid #ddd; 
    padding: 1.0em; 
    -webkit-column-break-inside: avoid; 
} 

Answer 2

只是一般FYI爲其他碰到這個論壇，需要Firefox的解決方案。

在撰寫本文時，Firefox 22.0不支持column-break-inside屬性，即使使用-moz-前綴。

但是解決辦法很簡單：只需使用display:table;即可。您也可以這樣做** display:inline-block;這些解決方案的問題是列表項將失去其列表樣式項目或項目符號圖標。

**另外，我遇​​到的display:inline-block;的一個問題是，如果兩個連續列表項中的文本非常短，則底部項目將自行包裝並與其上面的項目內聯。

display:table;是兩種解決方案中最差的。

此處瞭解詳情：http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

您應該使用break-inside: avoid;

完整的語法：

li { 
-webkit-column-break-inside: avoid; 
      page-break-inside: avoid; 
       break-inside: avoid; 
} 

，請參閱：https://css-tricks.com/almanac/properties/b/break-inside/