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
|
---
title: word-spacing
slug: Web/CSS/word-spacing
translation_of: Web/CSS/word-spacing
---
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">{{ CSSRef() }}</p>
<h2 id="Summary" name="Summary" style="margin: 0px 0px 20px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Summary</h2>
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit;"><font face="Open Sans, Arial, sans-serif">属性 </font></code><code style="font-family: Courier, 'Andale Mono', monospace; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit;">word-spacing</code> 用于声明标签和单词直接的间距行为。</p>
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax" style="margin: 0px 0px 20px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Syntax</h2>
<pre class="language-html" style="margin-top: 0px; margin-bottom: 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: normal; position: relative; text-shadow: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-html" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre; text-shadow: none;">word-spacing: normal; /* Keyword value */
word-spacing: 3px; /* <span class="tag token" style="border: 0px; color: rgb(153, 0, 85); margin: 0px; padding: 0px;"><span class="tag token" style="border: 0px; margin: 0px; padding: 0px;"><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;"><</span>length</span><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">></span></span> values */
word-spacing: 0.3em;
word-spacing: inherit;</code></pre>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>
<h3 id="Values" name="Values" style="margin: 0px 0px 12px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; font-weight: 200; line-height: 1; font-size: 1.71428571428571rem; letter-spacing: -0.021em; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Values</h3>
<dl style="margin: 0px 0px 20px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">
<dt style="margin: 0px; padding: 0px; border: 0px; font-weight: 700;"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;">normal</code></dt>
<dd style="margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px;">正常的单词间距，由当前字体和/或浏览器定义。</dd>
<dt style="margin: 0px; padding: 0px; border: 0px; font-weight: 700;"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;"><length></code></dt>
<dd style="margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px;">通过指定具体的额外间距来增加字体的单词间距。查看 {{cssxref("<length>")}} 了解可用单位。</dd>
<dt style="margin: 0px; padding: 0px; border: 0px; font-weight: 700;"><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;"><percentage></code></dt>
<dd style="margin: 0px 0px 24px; padding: 0px 0px 0px 20px; border: 0px;">通过指定受影响字符的宽度的百分比的方式来增加的间距。</dd>
</dl>
<h3 id="Formal_syntax" style="margin: 0px 0px 12px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; font-weight: 200; line-height: 1; font-size: 1.71428571428571rem; letter-spacing: -0.021em; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Formal syntax</h3>
<p><a class="syntaxbox-help icon-only" href="https://developer.mozilla.org/docs/Web/CSS/Value_definition_syntax" lang="en" style="margin: -4px 0px 0px -1.1em; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; height: 1.2em; float: left; font-size: 20px; width: 1.1em; opacity: 0; overflow: hidden; position: relative; text-align: center; font-family: 'Open Sans', Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="border: 0px; margin: 0px; padding: 0px;">How to read CSS syntax.</span></a></p>
{{csssyntax("word-spacing")}}
<h2 id="Examples" name="Examples" style="margin: 0px 0px 20px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Examples</h2>
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">以下 CSS 代码：</p>
<pre class="brush: css language-css" style="margin-top: 0px; margin-bottom: 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: normal; position: relative; text-shadow: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre; text-shadow: none;"><span class="selector token" style="border: 0px; color: rgb(102, 153, 0); margin: 0px; padding: 0px;">#mozdiv1 </span><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">{</span>
<span class="property token" style="border: 0px; color: rgb(153, 0, 85); margin: 0px; padding: 0px;">word-spacing</span><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">:</span> 15px<span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">;</span>
<span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">}</span>
<span class="selector token" style="border: 0px; color: rgb(102, 153, 0); margin: 0px; padding: 0px;">#mozdiv2 </span><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">{</span>
<span class="property token" style="border: 0px; color: rgb(153, 0, 85); margin: 0px; padding: 0px;">word-spacing</span><span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">:</span> 5em<span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">;</span>
<span class="punctuation token" style="border: 0px; color: rgb(153, 153, 153); margin: 0px; padding: 0px;">}</span></code></pre>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"> </div>
<div class="line-number" style="margin: 1em 0px 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 114px; background: 0px 0px;"> </div>
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);">会为两个包含如下内容 {{ HTMLElement("div") }} 标签添加如下样式：</p>
<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 21px; background-color: rgb(255, 255, 255);"><img alt="example.png" class="default internal" src="https://developer.mozilla.org/@api/deki/files/6103/=example.png" style="border: 0px; height: auto !important; margin: 0px; max-width: 100%; padding: 0px;"></p>
<h2 id="Specifications" style="margin: 0px 0px 20px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Specifications</h2>
<table class="standard-table" style="background-color: rgb(255, 255, 255); border-collapse: collapse; border: 2px solid rgb(255, 255, 255); color: rgb(77, 78, 83); font-family: open sans,arial,sans-serif; font-size: 14px; line-height: 21px; margin: 0px 0px 24px; padding: 0px;">
<thead>
<tr style="margin: 0px; padding: 0px; border: 0px;">
<th scope="col" style="margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); font-style: inherit; font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; background: rgba(212, 221, 228, 0.498039);">Specification</th>
<th scope="col" style="margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); font-style: inherit; font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; background: rgba(212, 221, 228, 0.498039);">Status</th>
<th scope="col" style="margin: 0px; padding: 2px 8px 4px; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgb(255, 255, 255) rgb(212, 221, 228); font-style: inherit; font-family: 'Open Sans Light', Helvetica, Arial, sans-serif; background: rgba(212, 221, 228, 0.498039);">Comment</th>
</tr>
</thead>
<tbody>
<tr style="margin: 0px; padding: 0px; border: 0px;">
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ SpecName('CSS3 Text', '#propdef-word-spacing', 'word-spacing') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ Spec2('CSS3 Text') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">Replace the previous values with a<code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;"><spacing-limit></code> value that defines the same value, plus the<code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;"><percentage></code> value and allows up to three values describing the optimum, minimum, and maximum value.</td>
</tr>
<tr style="margin: 0px; padding: 0px; border: 0px;">
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ SpecName('CSS3 Transitions', '#animatable-css', 'word-spacing') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ Spec2('CSS3 Transitions') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">Defines <code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Courier, 'Andale Mono', monospace;">word-spacing</code> as animatable.</td>
</tr>
<tr style="margin: 0px; padding: 0px; border: 0px;">
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ SpecName('CSS2.1', 'text.html#propdef-word-spacing', 'word-spacing') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ Spec2('CSS2.1') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">No change.</td>
</tr>
<tr style="margin: 0px; padding: 0px; border: 0px;">
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ SpecName('CSS1', '#word-spacing', 'word-spacing') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">{{ Spec2('CSS1') }}</td>
<td style="margin: 0px; padding: 6px; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(212, 221, 228, 0.498039) 0px -1px 0px 0px inset; background-color: rgba(212, 221, 228, 0.14902);">Initial specification.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility" style="margin: 0px 0px 20px; padding: 0px; border: 0px; word-wrap: break-word; font-family: 'Open Sans', Arial, sans-serif; line-height: 1; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); background-color: rgb(255, 255, 255);">Browser compatibility</h2>
{{Compat("css.properties.word-spacing")}}
|
