Comment empêcher les sauts de colonnes dans les éléments de liste en CSS ?

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

Dans le domaine du CSS et du responsive design, il est souvent souhaitable de garantir que des éléments spécifiques restent intacts dans une colonne donnée. Considérez cette structure HTML représentant une liste :

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

Maintenant, appliquons du CSS pour créer plusieurs colonnes :

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

Initialement, Firefox restitue cela comme suit :

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

Comme évident, le point quatre est réparti entre les deuxième et troisième colonnes. Pour éviter cela, la propriété CSS break-inside nous vient en aide :

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

Malheureusement, Firefox ne prend pas actuellement en charge cette propriété. Des solutions alternatives sont donc nécessaires pour Firefox. Une solution de contournement consiste à envelopper le contenu insécable dans un tableau, bien que cela soit loin d'être idéal.

Mise à jour :

Firefox 20 inclut la prise en charge des sauts de page à l'intérieur : éviter comme mécanisme pour empêcher les ruptures de colonnes. Cependant, le code suivant démontre qu'il ne fonctionne pas comme prévu pour les 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!