¿Cómo evitar la rotura 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 lo representa 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?

La representación deseada 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.

Oct 16 '11 22:10 Timwi

La forma correcta de hacerlo es con la break-insidepropiedad CSS :

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

Desafortunadamente, a partir de octubre de 2021, esto todavía no es compatible con Firefox , pero sí lo es con todos los demás navegadores principales . Con Chrome, pude usar el código anterior, pero no pude hacer que nada funcionara para Firefox ( consulte el 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 evitarla.

ACTUALIZAR

Según el informe de error mencionado anteriormente, Firefox 20+ admite page-break-inside: avoidun 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:

Mostrar fragmento de código

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

Expand snippet

Como otros mencionan, puede hacerlo 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 interrupción 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;
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* Chrome, Safari, 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>

Expandir fragmento

Oct 16 '2011 16:10 Brian Nickel

Añadiendo;

display: inline-block;

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

May 09 '2012 13:05 Steve

establezca lo siguiente según el estilo del elemento que no desea romper:

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

Jul 02 '2013 00:07 user2540794