Comment empêcher les sauts de colonnes à l'intérieur des éléments de liste dans les mises en page à plusieurs colonnes ?

Prévenir les sauts de colonnes dans un élément

Lors de l'utilisation de mises en page multi-colonnes, il est courant de rencontrer des problèmes de sauts de colonnes divisant les éléments de manière indésirable. Cela peut se produire lorsqu'un élément, tel qu'un élément de liste, est trop long pour tenir dans une seule colonne.

Énoncé du problème

Considérez le HTML et le CSS suivants :

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

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

Dans ce scénario, certains éléments de la liste peuvent être répartis entre les colonnes, comme le montre ce qui suit rendu :

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

Le but est d'éviter ce dédoublement et d'obtenir un rendu plus souhaité, tel que :

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

Solution : effraction à l'intérieur de la propriété

La solution à ce problème réside dans l'utilisation de la propriété CSS break-inside. En définissant breakinside : évitez-column sur l'élément que vous souhaitez empêcher de se briser, vous pouvez demander au navigateur de conserver l'élément dans une seule colonne.

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

Cette approche est largement prise en charge par les principaux navigateurs. , y compris Chrome et Safari. Cependant, depuis octobre 2021, Firefox ne prend toujours pas en charge la propriété break-inside.

Solution de contournement pour Firefox

Pour Firefox, il existe une solution de contournement impliquant l'utilisation d'une table. . Cependant, cette solution est fortement déconseillée en raison de ses implications négatives.

Support des sauts de page dans Firefox 20

Selon un rapport de bug de Firefox (Bogue 549114) , Firefox 20 et les versions ultérieures prennent désormais en charge l'utilisation du saut de page à l'intérieur : évitez d'empêcher les sauts de colonne dans un élément. Cependant, comme le démontre l'extrait de code suivant, cette méthode ne résout pas encore complètement le problème des listes :

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

<div class='x'>
    <ul>
        <li>Number one, one, one, one, one</li>
        <li>Number two, two, two, two, two, two, two, two, two, two, two, two</li>
        <li>Number three</li>
    </ul>
</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!