text-justify
CSS property sets what type of justification should be applied to text when
text-align
: justify;
is set on an element.
text-justify: none; text-justify: auto; text-justify: inter-word; text-justify: inter-character; text-justify: distribute; /* Deprecated value */
text-justify
property is specified as a single keyword chosen from the list of values below.
none
text-align
at all, although it is useful if you need to turn justification on and off for some reason.
auto
text-justify
is not set at all.
inter-word
word-spacing
), which is most appropriate for languages that separate words using spaces, like English or Korean.
inter-character
letter-spacing
), which is most appropriate for languages like Japanese.
distribute
inter-character
; this value is kept for backwards compatibility.
| 初始值 |
auto
|
|---|---|
| 适用于 | inline-level and table-cell elements |
| 继承 | yes |
| 计算值 | 如指定 |
| 动画类型 | discrete |
auto | inter-character | inter-word | none
<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>
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;
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Text Module Level 3
The definition of 'text-justify' in that specification. |
工作草案 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-justify
|
Chrome
完整支持
32
注意事项
Disabled
|
Edge
完整支持
12
注意事项
|
Firefox
完整支持
55
|
IE
完整支持
11
注意事项
|
Opera
完整支持
19
注意事项
Disabled
|
Safari
不支持
No
注意事项
|
WebView Android 不支持 No |
Chrome Android
完整支持
32
注意事项
Disabled
|
Firefox Android
完整支持
55
|
Opera Android
完整支持
19
注意事项
Disabled
|
Safari iOS
不支持
No
注意事项
|
Samsung Internet Android 不支持 No |
完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。