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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: text-justify
slug: Web/CSS/text-justify
tags:
- CSS文字
- 布局
- 排版
translation_of: Web/CSS/text-justify
---
<div>{{CSSRef}}</div>
<div></div>
<p>CSS属性 <strong><code>text-justify</code> </strong>定义的是当文本的 {{cssxref("text-align")}} 属性被设置为 <code>:justify</code> 时的齐行方法。</p>
<pre class="brush: css no-line-numbers notranslate">text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 已被废除，不提倡使用 */
</pre>
<p>{{cssinfo}}</p>
<h2 id="语法">语法</h2>
<p><code>text-justify</code> 属性的值只能取下面列表中的单个关键词值。</p>
<h3 id="值">值</h3>
<dl>
<dt><code>none</code></dt>
<dd>表示关闭掉齐行的设置。表现的效果和没有设置 {{cssxref("text-align")}} 一样，当你因为某种原因需要在已经设置了 {{cssxref("text-align")}} 的元素上禁用齐行效果的时候，这个属性值很有用。</dd>
<dd>译者注：经过测试，在谷歌（v 58.0.3029.110）下的表现与在火狐下的表现是不一样的，火狐下使用 <code>none</code> 属性时，的确可以禁用掉齐行设置，但是谷歌下还是没有设置 <code>none</code> 属性时的效果。</dd>
<dt><code>auto</code></dt>
<dd>默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 <code>text-justify</code> 进行设置的话，则是默认使用这样子的对齐规则。</dd>
<dt><code>inter-word</code></dt>
<dd>通过在文本中的单词之间添加空间来实现行对齐（这将会改变 {{cssxref("word-spacing")}} 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。</dd>
<dt><code>inter-character</code></dt>
<dd>The text is justified by adding space between characters (effectively varying {{cssxref("letter-spacing")}}), which is most appropriate for languages like Japanese.</dd>
<dd>通过在文本中的字符之间添加空间来实现行对齐（这将会改变 {{cssxref("letter-spacing")}} 的值），比如日语就是最适合使用这个属性的语言。</dd>
<dt><code>distribute </code>{{deprecated_inline}}</dt>
<dd>显示效果与设置了 <code>inter-word</code> 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。</dd>
</dl>
<h3 id="语法_2">语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<div class="hidden">
<pre class="brush: html notranslate"><p class="none"><code>text-justify: none</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="auto"><code>text-justify: auto</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="dist"><code>text-justify: distribute</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="word"><code>text-justify: inter-word</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p>
<p class="char"><code>text-justify: inter-character</code> —<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat justo id, feugiat leo. Cras eu elementum dui.</p></pre>
</div>
<pre class="brush: css notranslate">p {
font-size: 1.5em;
border: 1px solid black;
padding: 10px;
width: 95%;
margin: 10px auto;
text-align: justify;
}
.none {
text-justify: none;
}
.auto {
text-justify: auto;
}
.dist {
text-justify: distribute;
}
.word {
text-justify: inter-word;
}
.char {
text-justify: inter-character;
}</pre>
<p>{{EmbedLiveSample("示例","100%",400)}}</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-justify-property', 'text-justify')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>14<sup>[1]</sup></td>
<td>{{CompatGeckoDesktop("55.0")}}</td>
<td>11<sup>[1]</sup></td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>14<sup>[1]</sup></td>
<td>{{CompatGeckoMobile("55.0")}}</td>
<td>11<sup>[1]</sup></td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] 不支持标准属性值 <code>inter-character</code> 或 <code>none</code> 。但是支持过时的属性值 <code>distribute</code>和废弃属性值 <code>distribute-all-lines</code>、<code>distribute-center-last</code>、<code>inter-cluster</code>、<code>inter-ideograph</code>，以及 <code>newspaper</code>。</p>
<p>[2] 参照了默认的规范，属性值 <code>inter-word</code> 和 <code>distribute</code> 在“实验平台特性”的旗帜下被保留了下来，尽管 <code>distribulte</code> 已经不被提倡使用了。</p>
<h2 id="参见">参见</h2>
<ul>
<li>{{cssxref("text-align")}}</li>
</ul>
|
