Pour diviser le texte en plusieurs colonnes, nous utilisons la propriété « column-count » de CSS3. Cet attribut est utilisé pour diviser le contenu d'un élément HTML en un nombre spécifié de colonnes. Ici, nous utiliserons deux exemples différents pour démontrer l'application de la propriété CSS « nombre de colonnes » pour organiser le texte sur 2 et 3 colonnes.
column-count: n;
Ici, « n » est un entier positif, indiquant le nombre de colonnes dans lesquelles nous voulons que le texte soit organisé.
La traduction chinoise deDans cet exemple, nous utiliserons la propriété CSS3 « column-count » pour diviser le contenu de la balise « p » en 3 colonnes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to arrange text in multi columns using CSS3?</title>
<style>
.para {
column-count: 3;
}
</style>
</head>
<body>
<h3>How to arrange text in multi columns using CSS3?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</p>
</body>
</html>
Dans cet exemple, nous utiliserons la propriété « column-count » de CSS3 pour diviser le contenu de la balise « p » en deux colonnes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to arrange text in multi columns using CSS3?</title>
<style>
.para {
column-count: 2;
}
</style>
</head>
<body>
<h3>How to arrange text in multi columns using CSS3?</h3>
<p class="para">
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil architecto ratione cumque consequatur at fugit saepe, unde temporibus laudantium, incidunt sit possimus quidem soluta facere repellat dolore facilis, consectetur repudiandae.</span>
</p>
</body>
</html>
Dans cet article, nous avons appris ce qu'est la propriété « column-count » et comment organiser le texte dans plusieurs colonnes à l'aide de CSS3. Dans le premier exemple, nous organisons le texte en 3 colonnes en définissant la propriété "column-count" sur 3 et dans le deuxième exemple, nous organisons le texte en définissant la propriété "column-count" sur 2 en 3 colonnes.
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!
Quelle est la différence entre l'héritage et l'uefi ?
tutoriel de flexibilité
Introduction aux indicateurs de performances du disque dur
Étapes de création du projet SpringBoot
Où est le nombre de téléspectateurs en ligne à la station b ?
réalisation de pages web html
Que sont les éditeurs de texte Java ?
Que dois-je faire si msconfig ne peut pas être ouvert ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
