Comment puis-je créer un débordement de texte multicolonne en utilisant uniquement CSS ?

Création d'un débordement de texte multi-colonnes avec CSS

Dans le développement Web, il est courant de rencontrer le besoin d'afficher du texte dans plusieurs colonnes. Cette disposition, qui rappelle les mises en page des journaux, contribue à améliorer la lisibilité et à économiser de l'espace.

Utiliser CSS pour le débordement de texte multi-colonnes

Heureusement, vous pouvez obtenir cet effet multi-colonnes en utilisant CSS seul, sans recourir à plusieurs divs. L'extrait de code suivant montre comment :

div.multi {
  column-count: 3;
  column-gap: 10px;
  column-rule: 1px solid black;      
}

Dans ce code :

• column-count définit le nombre de colonnes souhaité. Dans cet exemple, il est défini sur 3.
• column-gap définit l'espacement entre les colonnes. Ici, un espace de 10 px est spécifié.
• column-rule ajoute une bordure entre les colonnes. Dans ce cas, il s'agit d'une bordure noire de 1 px.

Appliquez la multi-classe à n'importe quel div pour lequel vous souhaitez l'effet multi-colonnes. Par exemple :

<div class="multi">
  <p>Today in Wales, someone actually did something interesting.</p>
  <p>Nobody was harmed in the incident, although one elderly victim is receiving counselling.</p>
</div>

Cette solution CSS uniquement vous permet d'afficher du texte dans plusieurs colonnes de manière dynamique, en vous ajustant à différentes tailles d'écran ou largeurs de fenêtre de navigateur.

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!