¿Cómo evitar el salto de columna dentro de un elemento?

Considere el siguiente HTML:

<div class='x'>
    <ul>
        <li>Number one</li>
        <li>Number two</li>
        <li>Number three</li>
        <li>Number four is a bit longer</li>
        <li>Number five</li>
    </ul>
</div>

y el siguiente CSS:

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}

Tal como está, Firefox actualmente representa esto de manera similar a lo siguiente:

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five

Observe que el cuarto elemento se dividió entre la segunda y la tercera columna. ¿Cómo evito eso?

El renderizado deseado podría parecerse más a:

• Number one    • Number four is a
• Number two      bit longer
• Number three  • Number five

o

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer

Editar: el ancho solo se especifica para demostrar la representación no deseada. En el caso real, por supuesto, no hay un ancho fijo.

La forma correcta de hacerlo es con la propiedad CSS de ruptura :

.x li {
    break-inside: avoid-column;
}

Desafortunadamente, a partir de octubre de 2019, esto no es compatible con Firefox, pero es compatible con todos los demás navegadores principales . Con Chrome, pude usar el código anterior, pero no pude hacer que nada funcionara para Firefox ( ver error 549114 ).

La solución alternativa que puede hacer para Firefox si es necesario es envolver su contenido sin interrupciones en una tabla, pero esa es una solución realmente terrible si puede evitarlo.

ACTUALIZAR

Según el informe de error mencionado anteriormente, Firefox 20+ es compatible page-break-inside: avoidcomo un mecanismo para evitar saltos de columna dentro de un elemento, pero el fragmento de código a continuación demuestra que todavía no funciona con listas:

.x {
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
}

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

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</div>

Como otros mencionan, puede hacer overflow: hiddeno display: inline-blockpero esto elimina las viñetas que se muestran en la pregunta original. Su solución variará según cuáles sean sus objetivos.

ACTUALIZACIÓN 2 Dado que Firefox evita la ruptura display:tabley display:inline-blockuna solución confiable pero no semántica sería envolver cada elemento de la lista en su propia lista y aplicar la regla de estilo allí:

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    width: 30em;
}

.x ul {
    margin: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
    </ul>
    <ul>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
    </ul>
    <ul>
        <li>Number three</li>
    </ul>
</div>

Sumando;

display: inline-block;

a los elementos secundarios evitará que se dividan entre columnas.

establezca lo siguiente en el estilo del elemento que no desea romper:

overflow: hidden; /* fix for Firefox */
break-inside: avoid-column;
-webkit-column-break-inside: avoid;

A partir de octubre de 2014, la intrusión todavía parece estar defectuosa en Firefox e IE 10-11. Sin embargo, agregar overflow: oculto al elemento, junto con el break-inside: evitar, parece que funciona en Firefox e IE 10-11. Actualmente estoy usando:

overflow: hidden; /* Fix for firefox and IE 10-11  */
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
break-inside: avoid-column;

Firefox ahora es compatible con esto:

page-break-inside: avoid;

Esto resuelve el problema de los elementos que se rompen a través de las columnas.

La respuesta aceptada ahora tiene dos años y las cosas parecen haber cambiado.

Este artículo explica el uso de la column-break-insidepropiedad. No puedo decir cómo o por qué esto difiere break-inside, porque solo este último parece estar documentado en la especificación W3. Sin embargo, Chrome y Firefox admiten lo siguiente:

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

Esto funciona para mí en 2015:

li {
  -webkit-column-break-inside: avoid;
  /* Chrome, Safari, Opera */
  page-break-inside: avoid;
  /* Firefox */
  break-inside: avoid;
  /* IE 10+ */
}
.x {
  -moz-column-count: 3;
  column-count: 3;
  width: 30em;
}

<div class='x'>
  <ul>
    <li>Number one</li>
    <li>Number two</li>
    <li>Number three</li>
    <li>Number four is a bit longer</li>
    <li>Number five</li>
  </ul>
</div>

El siguiente código funciona para evitar saltos de columna dentro de los elementos:

-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
-o-column-break-inside: avoid;
-ms-column-break-inside: avoid;
column-break-inside: avoid;

En 2019, tener esto funciona para mí en Chrome, Firefox y Opera (después de muchos otros intentos fallidos):

.content {
    margin: 0;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    break-inside: avoid-column;
}

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

Firefox 26 parece requerir

page-break-inside: avoid;

Y Chrome 32 necesita

-webkit-column-break-inside:avoid;
   -moz-column-break-inside:avoid;
        column-break-inside:avoid;

Creo que tuve el mismo problema y encontré una solución en esto:

-webkit-column-fill: auto; /* Chrome, Safari, Opera */
-moz-column-fill: auto; /* Firefox */
column-fill: auto;  

Trabajando también en FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Una posible solución para Firefox es establecer la propiedad CSS "mostrar" del elemento que no desea que tenga un descanso dentro de "tabla". No sé si funciona para la etiqueta LI (probablemente perderá la lista -item-style), pero funciona para la etiqueta P.

Acabo de corregir algunos divmensajes que se estaban dividiendo en la siguiente columna agregando

overflow: auto

al niño div s.

* ¡Se dio cuenta de que solo lo corrige en Firefox!

Enfrenté el mismo problema al usar columnas de tarjeta

Lo arreglé usando

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;

<style>
ul li{display: table;}  
</style>

funciona perfectamente

Hice una actualización de la respuesta real.

Esto parece estar funcionando en Firefox y Chrome: http://jsfiddle.net/gatsbimantico/QJeB7/1/embedded/result/

.x{
columns: 5em;
-webkit-columns: 5em; /* Safari and Chrome */
-moz-columns: 5em; /* Firefox */
}
.x li{
    float:left;
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;  /* Safari and Chrome */
}

Nota: La propiedad float parece ser la que hace el comportamiento del bloque.

Esta respuesta solo puede aplicarse a ciertas circunstancias; Si establece una altura para sus elementos, esto será obedecido por el estilo de columna. Ahí, manteniendo todo lo que está contenido dentro de esa altura en una fila.

Tenía una lista, como la operación, pero contenía dos elementos, elementos y botones para actuar sobre esos elementos. Lo tratan como una mesa <ul> - table, <li> - table-row, <div> - table-cellpuse la UL en un diseño de 4 columnas. Las columnas a veces se dividían entre el elemento y sus botones. El truco que usé fue darle a los elementos Div una altura de línea para cubrir los botones.