1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: text-align-last
slug: Web/CSS/text-align-last
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/text-align-last
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>text-align-last</code></strong> 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.</p>
<div>{{EmbedInteractiveExample("pages/css/text-align-last.html")}}</div>
<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>La ligne concernée est alignée selon la valeur de {{cssxref("text-align")}} sauf si {{cssxref("text-align")}} vaut <code>justify</code>, auquel cas, cela aura le même effet que d'utiliser la valeur <code>start</code> pour <code>text-align-last</code>.</dd>
<dt><code>start</code></dt>
<dd>Cette valeur a le même effet que la valeur <code>left</code> si la direction du texte va de gauche à droite ou le même effet que <code>right</code> si la direction du texte va de droite à gauche.</dd>
<dt><code>end</code></dt>
<dd>Cette valeur a le même effet que la valeur <code>right</code> si la direction du texte va de gauche à droite ou le même effet que <code>left</code> si la direction du texte va de droite à gauche.</dd>
<dt><code>left</code></dt>
<dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord gauche de la boîte contenant la ligne.</dd>
<dt><code>right</code></dt>
<dd>Les contenus en ligne (<em>inline</em>) sont alignés sur le bord droit de la boîte contenant la ligne.</dd>
<dt><code>center</code></dt>
<dd>Les contenus en ligne (<em>inline</em>) sont horizontalement centrés par rapport à la boîte contenant la ligne.</dd>
<dt><code>justify</code></dt>
<dd>Le texte est justifié. Les bords gauche et droit du texte sont alignés avec les bord gauche et droit du paragraphe.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush:css">.exemple {
text-align: justify;
text-align-last: center;
}
</pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<div>{{cssinfo}}</div>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p class="hidden">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 <em>pull request</em> sur le dépôt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>
<p>{{Compat("css.properties.text-align-last")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("text-align")}}</li>
</ul>
|
