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

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

Linda Hamilton
Libérer: 2025-01-05 21:24:44
original
781 Les gens l'ont consulté

How Can I Prevent Column Breaks Within a List Element in 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>
Copier après la connexion
Copier après la connexion

CSS :

.x {
    -moz-column-count: 3;
    column-count: 3;
    width: 30em;
}
Copier après la connexion

Le rendu dans Firefox :

• Number one    • Number three          bit longer
• Number two    • Number four is a    • Number five
Copier après la connexion

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
Copier après la connexion

ou

• Number one    • Number three        • Number five
• Number two    • Number four is a
                  bit longer
Copier après la connexion

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

.x li {
    break-inside: avoid-column;
}
Copier après la connexion

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;
}
Copier après la connexion

HTML :

<div>
Copier après la connexion
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal