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
|
---
title: white-space
slug: Web/CSS/white-space
translation_of: Web/CSS/white-space
---
<div>{{CSSRef}}</div>
<p><strong><code>white-space</code></strong> CSS 属性是用来设置如何处理元素中的 {{Glossary("whitespace", "空白")}}。</p>
<p>{{EmbedInteractiveExample("pages/css/white-space.html")}}</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre><code>/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
/* https://github.com/w3c/csswg-drafts/pull/2841 */
white-space: break-spaces;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;</code>
</pre>
<p><code>white-space</code>属性被指定为从下面的值列表中选择的单个关键字。</p>
<h3 id="Values" name="Values">值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-formatting">line boxes</a>)」时是必要。</dd>
<dt><code>nowrap</code></dt>
<dd>和 normal 一样，连续的空白符会被合并。但文本内的换行无效。</dd>
<dt><code>pre</code></dt>
<dd>连续的空白符会被保留。在遇到换行符或者{{HTMLElement("br")}}元素时才会换行。 </dd>
<dt><code>pre-wrap</code></dt>
<dd>连续的空白符会被保留。在遇到换行符或者{{HTMLElement("br")}}元素，或者需要为了填充「行框盒子(<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-formatting">line boxes</a>)」时才会换行。</dd>
<dt><code>pre-line</code></dt>
<dd>连续的空白符会被合并。在遇到换行符或者{{HTMLElement("br")}}元素，或者需要为了填充「行框盒子(<a href="https://www.w3.org/TR/CSS2/visuren.html#inline-formatting">line boxes</a>)」时会换行。</dd>
</dl>
<p><code><strong>break-spaces</strong></code><br>
与 <code>pre-wrap</code>的行为相同，除了：</p>
<ul>
<li>任何保留的空白序列总是占用空间，包括在行尾。</li>
<li>每个保留的空格字符后都存在换行机会，包括空格字符之间。</li>
<li>这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。</li>
</ul>
<p>下面的表格总结了各种 white-space 值的行为：</p>
<table class="standard-table">
<thead>
<tr>
<th></th>
<th>换行符</th>
<th>空格和制表符</th>
<th>文字换行</th>
<th>行尾空格</th>
</tr>
</thead>
<tbody>
<tr>
<th><code>normal</code></th>
<td>合并</td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">合并</span></td>
<td>换行</td>
<td>删除</td>
</tr>
<tr>
<th><code>nowrap</code></th>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">合并</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">合并</span></td>
<td>不<span style="background-color: rgba(212, 221, 228, 0.14902);">换行</span></td>
<td>删除</td>
</tr>
<tr>
<th><code>pre</code></th>
<td>保留</td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">不换行</span></td>
<td>保留</td>
</tr>
<tr>
<th><code>pre-wrap</code></th>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">换行</span></td>
<td>挂起</td>
</tr>
<tr>
<th><code>pre-line</code></th>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">合并</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">换行</span></td>
<td>删除</td>
</tr>
<tr>
<th><code>break-spaces</code></th>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">保留</span></td>
<td><span style="background-color: rgba(212, 221, 228, 0.14902);">换行</span></td>
<td>换行</td>
</tr>
</tbody>
</table>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="基础示例">基础示例</h3>
<pre class="brush: css">code {
white-space: pre;
}</pre>
<h3 id="Specifications" name="Specifications">下面的代码允许在 {{HTMLElement("pre")}} 中换行</h3>
<pre class="brush: css"><code>pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: pre-wrap; /* current browsers */
}</code>
</pre>
<h2 id="Specifications" name="Specifications">规范</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', '#propdef-white-space', 'white-space')}}</td>
<td>{{Spec2('CSS3 Text')}}</td>
<td>Precises the breaking algorithms.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Initial specification.</td>
</tr>
</tbody>
</table>
<p>{{CSSInfo}}</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
<p>{{Compat("css.properties.white-space")}}</p>
|
