Come prevenire l'interruzione di colonna all'interno di un elemento?

Considera il seguente 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>

e il seguente CSS:

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

Allo stato attuale, Firefox attualmente lo rende in modo simile al seguente:

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

Si noti che il quarto elemento è stato diviso tra la seconda e la terza colonna. Come posso impedirlo?

Il rendering desiderato potrebbe assomigliare a qualcosa di più simile 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

Modifica: la larghezza viene specificata solo per dimostrare il rendering indesiderato. Nel caso reale, ovviamente, non esiste una larghezza fissa.

Il modo corretto per farlo è con la proprietà CSS break-inside :

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

Sfortunatamente, a partire da ottobre 2019, questo non è supportato in Firefox ma è supportato da tutti gli altri principali browser . Con Chrome, sono stato in grado di utilizzare il codice sopra, ma non sono riuscito a far funzionare nulla per Firefox ( vedi Bug 549114 ).

La soluzione alternativa che puoi fare per Firefox, se necessario, è quella di racchiudere i tuoi contenuti non-break in una tabella, ma è una soluzione davvero terribile se puoi evitarlo.

AGGIORNARE

Secondo la segnalazione di bug sopra menzionata, Firefox 20+ supporta page-break-inside: avoidcome meccanismo per evitare interruzioni di colonna all'interno di un elemento ma lo snippet di codice seguente dimostra che non funziona ancora con gli elenchi:

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

Come altri citano, puoi fare overflow: hiddeno display: inline-blockma questo rimuove i proiettili mostrati nella domanda originale. La tua soluzione varierà in base ai tuoi obiettivi.

AGGIORNAMENTO 2 Poiché Firefox non impedisce l'attivazione display:tablee display:inline-blockuna soluzione affidabile ma non semantica sarebbe quella di avvolgere ogni elemento dell'elenco nel proprio elenco e applicare lì la regola di stile:

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

aggiunta;

display: inline-block;

agli elementi figlio impedirà che vengano divisi tra le colonne.

impostare seguendo lo stile dell'elemento che non si desidera interrompere:

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

A partire da ottobre 2014, il break-inside sembra essere ancora pieno di bug in Firefox e IE 10-11. Tuttavia, aggiungendo l'overflow: nascosto all'elemento, insieme al break-inside: evitare, sembra farlo funzionare in Firefox e IE 10-11. Attualmente sto 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 ora supporta questo:

page-break-inside: avoid;

Questo risolve il problema degli elementi che si infrangono tra le colonne.

La risposta accettata ha ormai due anni e sembra che le cose siano cambiate.

Questo articolo spiega l'uso della column-break-insideproprietà. Non posso dire come o perché questo differisca break-inside, perché solo quest'ultimo sembra essere documentato nelle specifiche W3. Tuttavia, Chrome e Firefox supportano quanto segue:

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

Questo funziona per me nel 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>

Il codice seguente funziona per evitare interruzioni di colonna all'interno di elementi:

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

Nel 2019, avendo questo funziona per me su Chrome, Firefox e Opera (dopo molti altri tentativi falliti):

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

page-break-inside: avoid;

E Chrome 32 ha bisogno

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

Ho avuto lo stesso problema, penso e ho trovato una soluzione in questo:

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

Funziona anche in FF 38.0.5: http://jsfiddle.net/rkzj8qnv/

Una possibile soluzione alternativa per Firefox è impostare la proprietà CSS "display" dell'elemento che non si desidera avere una pausa all'interno di "table". Non so se funziona per il tag LI (probabilmente perderai l'elenco -item-style), ma funziona per il tag P.

Ho appena corretto alcuni divs che si stavano dividendo nella colonna successiva aggiungendo

overflow: auto

al bambino divs.

* Realizzato, risolve solo in Firefox!

Ho riscontrato lo stesso problema durante l'utilizzo di colonne di carte

l'ho risolto usando

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

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

funziona perfettamente

Ho fatto un aggiornamento della risposta effettiva.

Questo sembra funzionare su Firefox e 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 proprietà float sembra essere quella che crea il comportamento del blocco.

Questa risposta potrebbe applicarsi solo a determinate circostanze; Se imposti un'altezza ai tuoi elementi, questo verrà rispettato dallo stile della colonna. Lì mantenendo tutto ciò che è contenuto entro quell'altezza su una riga.

Avevo un elenco, come l'op, ma conteneva due elementi, elementi e pulsanti per agire su quegli elementi. Ho trattato come una tabella <ul> - table, <li> - table-row, <div> - table-cellmesso l'UL in un layout 4 colonna. A volte le colonne venivano divise tra l'elemento e i suoi pulsanti. Il trucco che ho usato era di dare agli elementi Div un'altezza di linea per coprire i pulsanti.