---
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>