initial commit

1 files changed, 158 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/white-space/index.html b/files/zh-cn/web/css/white-space/index.html
new file mode 100644
index 0000000000..f85206785c
--- /dev/null
+++ b/files/zh-cn/web/css/white-space/index.html
@@ -0,0 +1,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>