Colonnes CSS3 – Forcer un élément de rupture / fractionnement?

J’utilise des colonnes CSS3 (nombre de column-count: 2;column-gap: 20px; ) pour fractionner du contenu en deux colonnes. Dans mon contenu, j’ai un

suivi d’un

suivi d’un autre

.

Ma question: Existe-t-il un moyen d’empêcher mon

(ou tout autre élément spécifié) de se diviser en deux colonnes?

Par exemple, mon

est actuellement partiellement dans la colonne 1 et partiellement dans la colonne 2.

Blockquote divisé en plusieurs colonnes

Idéalement, j’aimerais que le

rest ensemble dans la colonne 1 ou 2.

Bloc de texte maintenu dans la colonne

Une idée si cela peut être réalisé?

Merci!

Ajouter un display:inline-block; à l’élément que vous souhaitez empêcher de fractionner.

En théorie, la propriété que vous recherchez est …

 blockquote { column-break-inside : avoid; } 

Cependant, la dernière fois que j’ai vérifié, il n’était pas correctement implémenté dans Webkit, aucune idée sur Firefox. J’ai eu plus de chance avec:

 blockquote { display: inline-block; } 

Comme le rendu le traite comme une image et ne le casse pas entre les colonnes.

Juste FYI général pour les autres qui se heurtent à ce forum et ont besoin d’une solution pour Firefox.

En ce moment, Firefox 22.0 ne supporte pas la propriété column-break-inside même avec le préfixe -moz- .

Mais la solution est assez simple: utilisez simplement display:table; . Vous pouvez aussi faire ** display:inline-block; Le problème avec ces solutions est que les éléments de la liste perdront leur élément de style de liste ou leur icône de puce.

** Aussi, un problème que j’ai rencontré avec display:inline-block; est que si le texte dans deux éléments de liste consécutifs est très court, l’élément du bas sera enroulé et aligné avec celui au-dessus.

display:table; est le moins pire des deux solutions.

Plus d’infos ici: http://trentwalton.com/2012/02/13/css-column-breaks/

Selon MDN , la solution correcte est

 blockquote { break-inside: avoid-column; } 

Cependant, ce n’est pas encore implémenté dans tous les navigateurs, une solution pratique est donc:

 blockquote { display: inline-block; }