¿Cómo fuerzo a mis columnas CSS3 a romperse solo en los saltos de línea?

Question

Actualmente estoy trabajando en una página que usa un conjunto de conjuntos de campos en una página de formulario que también implementa columnas CSS3.

El problema es que las columnas se envuelven de tal forma que a veces queda medio juego de campo cuando se pasa a la siguiente columna.

En el proyecto en el que estoy trabajando, estoy mirando una leyenda de Fieldset en Chrome 15 que está empalmado por la mitad con la mitad superior de las letras en la parte inferior de una columna y la mitad inferior de las letras en la parte superior de la siguiente columna. En Firefox 7, no veo este problema (tal vez ya se están rompiendo SOLAMENTE en los saltos de línea o después de elementos de bloque).

No creo que este sea un error específico de Chome, creo que simplemente no se especifica cómo se debe hacer aún, o algo así.

De todos modos, quiero indicar explícitamente a todos los navegadores compatibles con columnas que rompan entre esos conjuntos de campos. Gracias.

Hice una maqueta de la situación. Vea esto jsFiddle. (Obviamente se ve un poco diferente que el proyecto que he descrito anteriormente, pero el mismo error.)

Answer 1

Parece que WebKit ha implementado column-break-inside, que se puede agregar a la regla fieldset para detenerlo dividirlos en columnas

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

Answer 2

Solo un FYI general para otros que se encuentran con este foro y necesitan una solución para Firefox.

En este momento, Firefox 22.0 no admite la propiedad column-break-inside incluso con el prefijo -moz-.

Pero la solución es bastante simple: simplemente use display:table;. También puede hacer ** display:inline-block; El problema con estas soluciones es que los elementos de la lista perderán su elemento de estilo de lista o icono de viñeta.

** Además, un problema que he experimentado con display:inline-block; es que si el texto en dos elementos de la lista consecutiva es muy corto, el elemento inferior se cerrará y se alineará con el de arriba.

display:table; es la menos importante de ambas soluciones.

Más información aquí: http://trentwalton.com/2012/02/13/css-column-breaks/

Answer 3

que puedes usar break-inside: avoid;

sintaxis completa:

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

véase: https://css-tricks.com/almanac/properties/b/break-inside/