Perché Chrome interrompe il testo nel layout multi-colonna CSS3?

Question

Una dimostrazione del problema è qui.

http://www.vcn.bc.ca/~dugan/css3/newhtml.html

I più colonne di layout CSS3 visualizzata correttamente in Firefox. Opera e IE8 lo visualizzano come una colonna (che va bene). Chrome, tuttavia, tenta di visualizzarlo come più colonne e interrompe parte del testo.

C'è un modo per farlo funzionare con Chrome?

Answer 1

Sembra mostrare tutto il testo se si imposta un'altezza di riga di 1,5 sulla regola p in dugan.css. Sembra che ci sia ancora un difetto nel modo esatto in cui Chrome equilibra le colonne, potrebbe essere necessario inserire un paragrafo vuoto o aggiungere del padding sull'ultimo paragrafo o qualcosa del genere.

Answer 2

La regolazione dell'altezza della linea (o della dimensione del carattere, come consigliato altrove) potrebbe rimuovere il bug di clipping di Chrome, ma solo accidentalmente. Se si vuole evitare a livello di codice, l'unica soluzione di lavoro per ora è:

.multicolumn p { 
    display: inline-block; 
} 

si potrebbe espandere questa a tutti gli elementi figlio del contenitore più colonne, ma probabilmente sarà necessario aggiungere width: 100%; ad un certo punto. Per maggiori informazioni, leggi la discussione allo http://www.symphonious.net/2010/12/30/controlling-wrapping-in-css3-columns/ e http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/.

Inoltre, se la soluzione alternativa al blocco in linea non è di aiuto, la causa per il taglio dei bit di testo può consistere in un'applicazione ricorsiva di progettazione a più colonne. L'ho osservato in uno scenario più complesso rispetto a quello in cui un genitore remoto di un contenitore di testo a più colonne aveva il proprio layout di colonna. La rimozione del conteggio di colonne dal contenitore di livello superiore ha risolto i problemi di interruzione di colonna.

Answer 3

body{ 
    -webkit-column-break-inside:avoid; 
} 

Answer 4

In alcune situazioni, ho visto padding e margini nel contenuto di colonne causano questo problema. Prova:

.columnized-content { margin: 0; padding: 0; }