Effraction - Astuces CSS | CSS Almanach 2025

Les colonnes font un excellent travail de flux et d'équilibrage du contenu. Malheureusement, tous les éléments ne se déroulent pas correctement. Parfois, les éléments restent coincés entre les colonnes.

Heureusement, vous pouvez demander au navigateur de conserver des éléments spécifiques avec break-inside.

li ( -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; )

Pour le moment, la propriété accepte universellement les valeurs autoet avoid.

À utiliser avoidsur un élément dans une disposition à plusieurs colonnes pour empêcher la propriété de se séparer.

Jetez un œil supplémentaire à la syntaxe de cette propriété car il existe des variations entre les navigateurs.

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */

La propriété prend après les propriétés de saut de page et partage les mêmes valeurs. Pour l'instant, Firefox utilise page-break-inside.

Voir l'exemple d'introduction de la colonne Pen (CSS-Tricks) par Katy DeCorah (@katydecorah) sur CodePen.

Prise en charge du navigateur

Propriétés des sauts de page:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

Bureau

Chrome	Firefox	C'EST À DIRE	Bord	Safari
91	87	11	88	TP

Mobile / tablette

Chrome Android	Android Firefox	Android	Safari sur iOS
88	85	81	14,0-14,4

Prise en charge de la mise en page multi-colonnes:

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.