text-align-last
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.
La propriété text-align-last définit la façon dont la dernière ligne d'un bloc, ou une ligne avant un retour à la ligne forcé, doit être alignée.
Exemple interactif
text-align-last: right;
text-align-last: center;
text-align-last: left;
<section id="default-example">
<div>
<p id="example-element" style="text-align: justify">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
</section>
section {
font-size: 1.5em;
}
#default-example > div {
width: 250px;
}
Syntaxe
/* Valeurs utilisant un mot-clé */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
/* Valeurs globales */
text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;
Valeurs
auto-
La ligne concernée est alignée selon la valeur de
text-alignsauf sitext-alignvautjustify, auquel cas, cela aura le même effet que d'utiliser la valeurstartpourtext-align-last. start-
Cette valeur a le même effet que la valeur
leftsi la direction du texte va de gauche à droite ou le même effet querightsi la direction du texte va de droite à gauche. end-
Cette valeur a le même effet que la valeur
rightsi la direction du texte va de gauche à droite ou le même effet queleftsi la direction du texte va de droite à gauche. left-
Les contenus en ligne (inline) sont alignés sur le bord gauche de la boîte contenant la ligne.
right-
Les contenus en ligne (inline) sont alignés sur le bord droit de la boîte contenant la ligne.
center-
Les contenus en ligne (inline) sont horizontalement centrés par rapport à la boîte contenant la ligne.
justify-
Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
text-align-last =
auto |
start |
end |
left |
right |
center |
justify |
match-parent
Exemples
>HTML
<p class="exemple">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
CSS
.exemple {
text-align: justify;
text-align-last: center;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3> # text-align-last-property> |
Compatibilité des navigateurs
Chargement…