Jak zmusić kolumny CSS3 do łamania tylko w linii podziału?

Question

Obecnie pracuję nad stroną, która wykorzystuje kilka zestawów pól na jednej stronie formularza, która również implementuje kolumny CSS3.

Problem polega na tym, że kolumny zawijają się w taki sposób, że czasami połowa zestawu pól pozostaje w tyle po zerwaniu do następnej kolumny.

Nad projektem, nad którym obecnie pracuję, patrzę na legendę zestawu pól w Chrome 15, która jest połączona na pół z górną połową liter na dole jednej kolumny i dolną połową liter u góry następnej kolumny. W Firefoksie 7, nie widzę tego problemu (może już łamią się TYLKO na łamach linii lub po elementach blokowych).

Nie sądzę, że jest to błąd specyficzny dla Chome, myślę, że po prostu nie określono, jak to jeszcze zrobić, czy coś.

W każdym razie chcę jednoznacznie powiedzieć wszystkim przeglądarkom obsługującym kolumny, aby włamały się między te zestawy pól. Dzięki.

Zrobiłem makietę sytuacji. Zobacz ten jsFiddle. (Oczywiście wygląda trochę inaczej niż w projekcie opisanym powyżej, ale tego samego błędu.)

Answer 1

Wygląda WebKit wdrożył column-break-inside, które można dodać do reguły fieldset aby zatrzymać go dzieląc je w kolumnach

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

Answer 2

Po prostu ogólne FYI dla innych użytkowników, którzy wpadają na to forum i potrzebują rozwiązania dla Firefoksa.

W chwili pisania tego, Firefox 22.0 nie obsługiwał właściwości column-break-inside nawet z prefiksem -moz-.

Ale rozwiązanie jest dość proste: po prostu użyj display:table;. Możesz również zrobić ** display:inline-block; Problem z tymi rozwiązaniami polega na tym, że elementy listy stracą swój styl lub ikonę punktora.

** Jednym z problemów, które miałem z display:inline-block;, jest to, że jeśli tekst na dwóch kolejnych pozycjach listy jest bardzo krótki, dolny element będzie się zawijał i będzie znajdował się w miejscu znajdującym się nad nim.

display:table; to najgorsze z obu rozwiązań.

Więcej informacji tutaj: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

Należy użyć break-inside: avoid;

Pełna składnię:

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

patrz: https://css-tricks.com/almanac/properties/b/break-inside/