Propriété text-align-last
La propriété text-align-last définit
l'alignement de la dernière ligne d'un texte :
sur le bord gauche, sur le bord droit, au centre,
ou justifié (alignée à la fois sur les bords gauche et droit).
Veuillez noter que si un élément
(par exemple, un paragraphe) contient une seule ligne,
elle est considérée à la fois comme la première et la
dernière ligne, et son alignement sera celui
défini par text-align-last, et non
celui défini par text-align.
Syntaxe
sélecteur {
text-align-last: center | left | right | justify | auto | start | end;
}
Valeurs
| Valeur | Description |
|---|---|
center |
Au centre. |
left |
Sur le bord gauche. |
right |
Sur le bord droit. |
justify |
Justifié (aligné à la fois sur les bords gauche et droit). |
auto |
Ne modifie pas l'alignement de l'élément. |
start |
Équivaut à left si le texte va de gauche à droite, et à right
si le texte va de droite à gauche (langue arabe, etc.).
|
end |
Équivaut à right si le texte va de gauche à droite, et à left
si le texte va de droite à gauche.
|
inherit |
Hérite de la valeur du parent. |
Valeur par défaut : auto.
Exemple . Valeur left
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
p {
text-align: justify;
text-align-last: left;
}
:
Exemple . Valeur right
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
p {
text-align: justify;
text-align-last: right;
}
:
Exemple . Valeur center
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
p {
text-align: justify;
text-align-last: center;
}
:
Exemple . Valeur justify
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl. Suspendisse egetil
fringilla nibh, eu commodo arcu. Donec lacinia tempor velite
sed tincidunt. Aliquam porttitor nulla purus, vel vulputater
ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehi
ante purus lacini dui, interdum fringilla massa eros ut duir.
</p>
<p>
Lorem ipsum dolor sit amet.
</p>
p {
text-align: justify;
text-align-last: justify;
}
: