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


272

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.


hai provato a dargli uno stile autonomo? come <li style = "width: ??? px"> Il numero quattro è un po 'più lungo </li> ??? px = larghezza necessaria per adattarsi a quel numero quattro.
rmagnum2002,

Risposte:


397

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:

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>


4
Credo che Opera 11.5 supportibreak-inside: avoid-column
Alohci il

2
Guardando il commento 15 page-break-inside:avoid dovrebbe funzionare in FF 20.
Brian Nickel

23
-webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;
All'anno

3
@CarlesJoveBuxeda Non vedono alcun miglioramento in Firefox 31. Né l'interruzione di colonna o l'interruzione di pagina (con o senza prefisso) funzionano.
Brian Nickel

6
È un po 'tardi, ma poiché questo è ancora un problema nel 2018, potrebbe essere utile per gli altri che finiscono qui. Se qualcuno ha ancora bug tra i browser con questo, overflow: hiddenè l'opzione migliore. display: inline-block;sfortunatamente provoca nuove stranezze con Chrome.
SilasOtoko,

170

aggiunta;

display: inline-block;

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


1
Questo è buono. Un modo possibile per prevenire il cattivo comportamento del blocco inline che causa la rimozione di oggetti su una riga (se sono troppo corti) è di avvolgerlo ulteriormente con un display:blockelemento. Per il momento, questa sarà probabilmente una valida soluzione per Firefox.
Steven Lu,

Questa soluzione rimuove l'elemento della lista, quindi se stai usando liste di ordini per esempio questa non sarebbe un'alternativa.
Ricardo Zea,

Funziona perfettamente per suddividere i paragrafi in colonne.
ChrisC,

per gli elementi dell'elenco, questo può funzionare se si incorpora il contenuto dell'elemento dell'elenco (li) all'interno di un set di elementi "span" con "display: inline-block". La situazione è molto più complessa se si desidera controllare dove interrompere le pagine o le colonne all'interno delle tabelle: si desidera evitare interruzioni all'interno delle righe della tabella (tr). In realtà, i layout a più colonne sono ancora difficili da configurare, ma ne abbiamo bisogno per consentire ai siti di adattarsi a schermi molto stretti (come gli smartphone) e a schermi di grandi dimensioni (in cui colonne verticali molto strette sono davvero ingiuste.
verdy_p

7
Funziona per il mio, <li>ma ho dovuto aggiungere width:100%;per impedire loro di impilarsi in orizzontale.
Giustino,

47

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;

1
Grazie!! Ho avuto problemi con FF e questo risolve il problema!
Francis Perron,

Anch'io. Le soluzioni di cui sopra non funzionavano per me, ma le tue lo hanno fatto. Complimenti!
Maxx,

Questo funziona su FF e in realtà non nasconde i miei contenuti!
Giustino,

simpatico. funziona anche per il paragrafo colum text. Aggiunto overflow: nascosto in <p> ind <div> con le colonne. Funziona per FF.
dichterDichter

1
In realtà, la overflow:hiddenregola non è una correzione per le altre regole, è ciò che causa il layout non-rottura ...
Gras Double

23

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;

Questa sembra essere la lista più completa
binaryfunt,

12

Firefox ora supporta questo:

page-break-inside: avoid;

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


Hai funzionato? Sto guardando questo violino in FF 22 e non funziona: jsfiddle.net/bnickel/5qwMf
Brian Nickel

Lo stesso qui, non funziona in Firefox 22. Inoltre, Firebug visualizza solo page-break-before:o page-break-after:nopage-break-inside:
Ricardo Zea,

Versione 28 di Firefox. Questo è l'unico che funziona ancora per me, grazie!
Sander Verhagen,

9

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 non funziona per un <div class = "a"> generico in cui "a" sostituisce il "Li" sopra. Il div ancora si è rotto dentro. FF 26
Nasser,

Non è un bug. il codice sopra è corretto per la funzione descritta anche se il suo selettore è solo per un elemento li. In questo esempio potresti comunque utilizzare un altro selettore CSS "div.a {...}" anziché "li {...}".
verdy_p,

Tuttavia Chrome non supporta ancora -webkit-column-break-inside: avoid; su una riga della tabella: questo non funziona e non possiamo ancora evitare di rompere le tabelle in posizioni errate (in particolare se una cella della fiaba non contiene solo testo ma icone; ma Chrome sembra anche dividere in qualsiasi posizione verticale nel mezzo di una riga di testo , rompendo il testo con la parte superiore dei glifi di testo nella parte inferiore della prima colonna e la parte inferiore dei glifi di testo nella parte superiore della colonna successiva !!! Il risultato è assolutamente illeggibile !!!
verdy_p

A partire dal 2017, la divisione delle colonne non sembra essere una proprietà CSS valida. MDN dice solo "Edge supporta anche la variante non standard -webkit-column-break-inside."
Jacob C. dice di reintegrare Monica il

9

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>


Questo è il lavoro per me su ulelementi, è pubblicato su trucchi CSS: css-tricks.com/almanac/properties/b/break-inside , e sembra corretto sulla base di note di compatibilità caniuse: "Il supporto parziale riferisce di non sostenere il break-before, break-after, break-insideproprietà I browser basati su WebKit e Blink hanno un supporto equivalente per le -webkit-column-break-*proprietà non standard per ottenere lo stesso risultato (ma solo i valori autoe always). Firefox non supporta break-*ma supporta le page-break-*proprietà per ottenere lo stesso risultato. "
nabrown

3

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;

3

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;
}

2

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;

2

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/


Questa soluzione mi aiuta
OzzyCzech,

1

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.


Questa soluzione rimuove l'elemento della lista, quindi se stai usando liste di ordini per esempio questa non sarebbe un'alternativa.
Ricardo Zea,

1

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

overflow: auto

al bambino divs.

* Realizzato, risolve solo in Firefox!


1

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%;

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

funziona perfettamente


0

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.


0

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.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.