Comment puis-je empêcher les sauts de colonnes dans un élément de liste en CSS ?

Empêcher les sauts de colonnes dans un élément

L'objectif est d'empêcher le contenu de se répartir sur plusieurs colonnes d'un élément, garantissant ainsi le rendu souhaité. Prenons l'exemple ci-dessous :

HTML :

<div>

CSS :

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

Le rendu dans Firefox :

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

Le but est pour obtenir un rendu qui évite les ruptures de contenu, ce qui donne lieu à un rendu plus cohérent display :

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

ou

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

La solution réside dans l'utilisation de la propriété CSS break-inside :

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

Cette propriété est prise en charge par tous les principaux navigateurs sauf Firefox. Dans Firefox, une solution de contournement utilisant un tableau peut être utilisée, mais ce n'est pas une solution idéale.

Mise à jour

Firefox 20 prend désormais en charge les sauts de page : évitez pour empêcher les sauts de colonnes, mais le code suivant démontre qu'il ne fonctionne toujours pas efficacement avec listes :

CSS :

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

HTML :

<div>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!