Maison > Article > interface Web > Comment organiser le texte sur plusieurs colonnes en utilisant CSS3 ?
Comment organiser le texte sur plusieurs colonnes en utilisant CSS3 ?
- WBOYavant
- 2023-08-23 13:29:021122parcourir
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.
Grammaire
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 deExemple 1
est :Exemple 1
Dans 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>
La traduction chinoise de Exemple 2
est :Exemple 2
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>
Conclusion
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!