


Comment puis-je empêcher les sauts de colonnes dans un élément de liste en CSS ?
Jan 05, 2025 pm 09:24 PMEmpê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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques

Faire votre première transition Svelte personnalisée

Téléchargement de fichiers avec Multer dans Node.js et Express
