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.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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.
Syntaxe formelle
auto | start | end | left | right | center | justify
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
| Spécification | État | Commentaires |
|---|---|---|
| CSS Text Module Level 3 La définition de 'text-align-last' dans cette spécification. |
Version de travail | Définition initiale. |
| Valeur initiale | auto |
|---|---|
| Applicabilité | conteneurs de type bloc |
| Héritée | oui |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur le dépôt https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
| Ordinateur | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-align-last | Chrome
Support complet
47
| Edge Support complet 12 | Firefox
Support complet
49
| IE
Support partiel
5.5
| Opera Support complet Oui | Safari
Aucun support
Non
| WebView Android Support complet 47 | Chrome Android
Support complet
47
| Firefox Android
Support complet
49
| Opera Android Support complet Oui | Safari iOS
Aucun support
Non
| Samsung Internet Android Support complet 5.0 |
Légende
- Support complet
- Support complet
- Support partiel
- Support partiel
- Aucun support
- Aucun support
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.