9.1 Propriété text-indent
Les propriétés des paragraphes en CSS jouent un rôle clé dans la gestion du formatage du texte, assurant une lecture confortable et une attractivité esthétique. Parmi elles, text-indent et text-align-last sont des outils importants pour ajuster les indentations et l'alignement de la dernière ligne de texte dans un paragraphe.
La propriété text-indent contrôle l'indentation de la première ligne de texte à l'intérieur d'un élément de bloc. Elle est souvent utilisée pour créer des indentations en début de paragraphes, ce qui améliore la lisibilité et la structure du texte.
Valeurs :
- Valeurs absolues: valeurs en unités fixes, telles que pixels (
px), points (pt), centimètres (cm), etc. Par exemple,text-indent: 20px; - Valeurs en pourcentage: valeurs en pourcentage de la largeur du bloc contenant. Par exemple,
text-indent: 5%; - Valeurs négatives: les indentations peuvent être négatives, ce qui entraînera un alignement du texte vers la gauche en dehors des limites du conteneur. Par exemple,
text-indent: -20px;
Exemple d'utilisation :
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
<body>
<p class="indent-20px">Ceci est un paragraphe avec une indentation de 20 pixels sur la première ligne.</p>
<p class="indent-5percent">Ceci est un paragraphe avec une indentation de 5 pour cent de la largeur du bloc sur la première ligne.</p>
<p class="indent-negative">Ceci est un paragraphe avec une indentation négative de 20 pixels sur la première ligne.</p>
</body>
9.2 Propriété text-align-last
La propriété text-align-last contrôle l'alignement de la dernière ligne de texte à l'intérieur d'un élément de bloc. Elle est utile pour obtenir un alignement cohérent dans les paragraphes, surtout lorsque le texte est justifié (justify).
Valeurs :
auto: la dernière ligne est alignée comme un texte normal (valeur par défaut)left: la dernière ligne est alignée à gaucheright: la dernière ligne est alignée à droitecenter: la dernière ligne est centréejustify: la dernière ligne est justifiée, comme les autres lignes du paragraphe
Exemple d'utilisation :
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
<body>
<p class="justify-left">Ceci est un paragraphe avec un texte justifié et la dernière ligne alignée à gauche.</p>
<p class="justify-right">Ceci est un paragraphe avec un texte justifié et la dernière ligne alignée à droite.</p>
<p class="justify-center">Ceci est un paragraphe avec un texte justifié et la dernière ligne centrée.</p>
<p class="justify-justify">Ceci est un paragraphe avec un texte et la dernière ligne justifiés.</p>
</body>
9.3 Utilisation conjointe des propriétés
Les propriétés text-indent et text-align-last peuvent être utilisées ensemble pour créer un formatage de paragraphe plus complexe, améliorant la lisibilité et la structure visuelle du texte.
Exemple de HTML et CSS :
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
<body>
<p class="styled-paragraph">
Ce paragraphe a une indentation de 30 pixels sur la première ligne, le texte est justifié, et la dernière ligne est alignée à droite.
Cela démontre l'utilisation conjointe des propriétés text-indent et text-align-last pour atteindre l'effet de formatage désiré.
</p>
</body>
Explication du code :
text-indent: 30px;: définit une indentation de 30 pixels sur la première ligne de textetext-align: justify;: aligne le texte à la largeur du conteneurtext-align-last: right;: aligne la dernière ligne de texte à droitewidth: 300px;: définit la largeur du conteneur pour le texteborder: 1px solid #000;: ajoute une bordure autour du conteneur de textepadding: 10px;: définit les marges internes à l'intérieur du conteneur
GO TO FULL VERSION