¿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 hace 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 prevengo 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

Edit: El ancho solo se especifica para demostrar el renderizado no deseado. En el caso real, de por supuesto no hay ancho fijo.

Author: Vadim Ovchinnikov, 2011-10-16
Source

16 answers

La forma correcta de hacer esto es con la propiedad CSS break-inside : 

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

Desafortunadamente, ningún navegador actualmente admite esto. Con Chrome, pude usar lo siguiente, pero no pude hacer que nada funcionara para Firefox ( Ver Bug 549114):

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

La solución que puede hacer para Firefox si es necesario es envolver su contenido que no se rompe en una tabla, pero esa es una solución realmente, realmente terrible si se puede evitar se.

UPDATE

De acuerdo con el informe de error mencionado anteriormente, Firefox 20 + soporta page-break-inside: avoid como un mecanismo para evitar saltos de columna dentro de un elemento, pero el siguiente fragmento de código demuestra que todavía no funciona con listas: 

.x {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    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, puedes hacer overflow: hidden o display: inline-block pero esto elimina las viñetas mostradas en la pregunta original. Su solución variará en función de cuáles sean sus objetivos.

ACTUALIZACIÓN 2 Dado que Firefox evita romper en display:table y display:inline-block una 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>
 311
Author: Brian Nickel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-06 18:25:10

Añadiendo; 

display: inline-block;

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

 144
Author: Steve,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-09 13:07:38

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;
 44
Author: user2540794,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-02 00:13:59

A partir de octubre de 2014, break-inside todavía parece tener errores en Firefox e IE 10-11. Sin embargo, agregar overflow: hidden al elemento, junto con el break-inside: avoid, parece hacer que funcione 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;
 21
Author: VerticalGrain,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-23 12:59:23

Firefox ahora soporta esto: 

page-break-inside: avoid;

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

 10
Author: paul haine,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-06-29 11:00:30

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

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

li {
    -webkit-column-break-inside:avoid;
       -moz-column-break-inside:avoid;
            column-break-inside:avoid;
}
 9
Author: keithjgrant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-11-06 21:53:25

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>
 7
Author: Sébastien Gicquel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-21 11:12:47

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;
 2
Author: MAP,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-13 15:14:29

Tuve el mismo problema que creo 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/

 2
Author: dichterDichter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-07-01 14:14:11

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;
 2
Author: StellarDoor5319,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-13 16:12:14

Una posible solución para Firefox es establecer la propiedad CSS "display" del elemento que no desea tener un descanso dentro de "table". No se si funciona para la etiqueta LI (probablemente perderás el estilo list-item), pero funciona para la etiqueta P.

 1
Author: Christopher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-03-10 18:05:22

Acabo de arreglar algunos divs que se dividían en la siguiente columna agregando 

overflow: auto

Al niño div s.

* Se dio cuenta de que solo lo arregla en Firefox!

 1
Author: mateostabio,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-14 14:52:04

Me enfrenté al mismo problema mientras usaba card-columns

Lo arreglé usando 

 display: inline-flex ;
 column-break-inside: avoid;
 width:100%;
 1
Author: Mysterious_Anny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-07 09:50:21

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 de bloque.

 0
Author: Gatsbimantico,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-23 12:26:30

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

Tenía una lista, como el op, pero contenía dos elementos, elementos y botones para actuar sobre esos elementos. Lo traté como a una mesa.<ul> - table, <li> - table-row, <div> - table-cell coloque 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é era dar a los elementos Div una altura de línea para cubrir los botones.

 0
Author: Tod,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-06-23 08:05:46 
<style>
ul li{display: table;}  
</style>

Funciona perfectamente

 0
Author: Tahir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-05 13:05:28