Comment empêcher le contenu de traverser les colonnes CSS ?

Comment empêcher la rupture de colonne dans un élément : un guide complet

Problème :
Dans la conception Web, lorsque le contenu est formaté à l'aide Colonnes CSS, il est possible que le contenu s'enroule entre les colonnes, ce qui entraîne un effet visuellement indésirable. Par exemple, une liste peut être divisée en plusieurs colonnes, perturbant ainsi sa continuité.

Solution :
Pour éviter cette rupture indésirable, la propriété CSS break-inside peut être utilisée. En le définissant sur éviter-colonne, le navigateur est invité à conserver le contenu dans la même colonne autant que possible.

Exemple :
Pour éviter les sauts de ligne dans les éléments de liste dans un multi- disposition des colonnes :

.list-container {
    column-count: 3;
}

.list-container li {
    break-inside: avoid-column;
}

Navigateur Support :
Malheureusement, depuis octobre 2021, Firefox ne prend pas entièrement en charge le cambriolage : éviter-colonne. Cependant, cette propriété est prise en charge par tous les principaux navigateurs à l'exception de Firefox.

Solution de contournement pour Firefox :
Pour Firefox, une solution de contournement peut être utilisée pour empêcher les sauts de colonne dans les éléments de liste : encapsuler le contenu dans un tableau.

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>Number</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Number one, one, one, one, one</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Number two, two, two, two, two, two, two, two, two, two, two, two</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Number three</td>
            </tr>
        </tbody>
    </table>
</div>

.container {
    column-count: 3;
}

Remarque : Cette solution de contournement n'est pas idéale, car elle peut introduire complexités supplémentaires en matière de balisage et de style.

Mise à jour :
Les mises à jour récentes de Firefox 20 ont introduit la prise en charge des sauts de page à l'intérieur : à éviter, mais cela ne résout pas encore complètement le problème de empêcher les sauts de colonnes dans les listes. Une surveillance continue du développement des navigateurs Web est recommandée.

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!