files/zh-cn/web/css/text-align-last/index.html


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

---
title: text-align-last
slug: Web/CSS/text-align-last
tags:
  - CSS文字
  - 布局
translation_of: Web/CSS/text-align-last
---
<div>{{CSSRef}}</div>

<div></div>

<p>CSS 属性 <strong><code>text-align-last</code></strong>  描述的是一段文本中最后一行在被强制换行之前的对齐规则。</p>

<pre class="brush:css no-line-numbers">/* Keyword values */
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;

/* Global values */
text-align-last: inherit;
text-align-last: initial;
text-align-last: unset;
</pre>

<div>{{cssinfo}}</div>

<h2 id="语法">语法</h2>

<h3 id="属性值">属性值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>每一行的对齐规则由 {{cssxref("text-align")}} 的值来确定，当 {{cssxref("text-align")}} 的值是 <code>justify</code>，<code>text-align-last</code> 的表现和设置了 <code>start</code> 的表现是一样的，即如果文本的展示方向是从左到右，则最后一行左侧对齐与内容盒子。</dd>
 <dd>
 <p>译者注：<br>
  经测试，当 {{cssxref("text-align")}} 的值为 <code>right</code>，并且 <code>text-align-last</code> 设置为 <code>auto</code> 时，文本最后一行的对齐方式相当于 <code>text-align-last</code> 被设置为 <code>right</code> 时的效果。即 <code>text-align-last</code> 设置为 <code>auto</code> 后的表现跟 {{cssxref("text-align")}} 的设置有关。</p>
 </dd>
 <dt><code>start</code></dt>
 <dd>与 {{cssxref("direction")}} 的设置有关。<br>
 如果文本展示方向是从左到右，起点在左侧，则是左对齐；<br>
 如果文本展示方向是从右到左，起点在右侧，则是右对齐。<br>
 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。</dd>
 <dt><code>end</code></dt>
 <dd>与 {{cssxref("direction")}} 的设置有关。<br>
 如果文本展示方向是从左到右，末尾在右侧，则是右对齐；<br>
 如果文本展示方向是从右到左，末尾在左侧，则是左对齐。<br>
 如果没有设置 {{cssxref("direction")}} ，则按照浏览器文本的默认显示方向来确定。</dd>
 <dt><code>left</code></dt>
 <dd>最后一行文字与内容盒子的左侧对齐</dd>
 <dt><code>right</code></dt>
 <dd>最后一行文字与内容盒子的右侧对齐</dd>
 <dt><code>center</code></dt>
 <dd>最后一行文字与内容盒子居中对齐</dd>
 <dt><code>justify</code></dt>
 <dd>最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐。</dd>
</dl>

<h3 id="语法_2">语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="示例">示例</h2>

<div class="hidden">
<pre class="brush: html">&lt;p&gt;Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, suscipit sed dictum quis, accumsan a ligula.&lt;/p&gt;
</pre>
</div>

<pre class="brush: css">p {
  font-size: 1.4em;
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}</pre>

<p>{{EmbedLiveSample('Example','100%')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#text-align-last', 'text-align-last')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

<p>{{Compat("css.properties.text-align-last")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{cssxref("text-align")}}</li>
 <li>{{cssxref("direction")}}</li>
</ul>