---
title: white-space
slug: Web/CSS/white-space
tags:
  - CSS
  - Layout
  - Precisa de Compatibilidade com Navegadores Mobile
  - Precisa de Exemplos
  - Propriedade
  - Referencia
  - Referência(2)
  - Textos CSS
  - Web
translation_of: Web/CSS/white-space
---
<div>{{CSSRef}}</div>

<h2 id="Summary" name="Summary">Resumo</h2>

<p>A propriedade CSS <span style="font-family: consolas,monaco,andale mono,monospace;">white-space é usada para descrever como os espaços em branco dentro dos elementos são manipulados.</span></p>

<p>{{cssinfo}}</p>

<h2 id="Syntax" name="Syntax">Sintaxe</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("white-space")}}</pre>

<pre>white-space: normal
white-space: nowrap
white-space: pre
white-space: pre-wrap
white-space: pre-line

white-space: inherit
</pre>

<h3 id="Values" name="Values">Valores</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Sequências de espaços em branco são recolhidas. Caracteres de nova linha no código são tratados como outros espaços em branco. As linhas quebram conforme a necessidade para preencher as linhas das caixas (boxes).</dd>
 <dt><code>nowrap</code></dt>
 <dd>Recolhe os espaços em branco como no <span style="font-family: consolas,monaco,andale mono,monospace;">normal,</span> mas suprime as quebras de linha (quebra de texto) no texto.</dd>
 <dt><code>pre</code></dt>
 <dd>Sequências de espaço em branco são preservadas, linhas são quebradas apenas em carateres de nova linha no código e em elementos {{HTMLElement("br")}}.</dd>
 <dt><code>pre-wrap</code></dt>
 <dd>Sequências de espaço em branco são preservadas. Linhas são quebradas em caracteres de nova linha, em {{HTMLElement("br")}} e quando necessário para preencher as linhas das caixas  (boxes).</dd>
 <dt><code>pre-line</code></dt>
 <dd>Sequências de espaços em branco são recolhidas. Linhas são quebradas em caracteres de nova linha, em {{HTMLElement("br")}} e quando necessário para preencher as linhas das caixas  (boxes).</dd>
</dl>

<p>A tabela a seguir resume o comportamento dos valores para <span style="font-family: consolas,monaco,andale mono,monospace;">white-space:</span></p>

<table class="standard-table">
 <thead>
  <tr>
   <th> </th>
   <th>Novas linhas</th>
   <th>Espaços e Tabulações (tabs)</th>
   <th>Quebra de texto </th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th><code>normal</code></th>
   <td>Recolhido</td>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td>
   <td>Quebra</td>
  </tr>
  <tr>
   <th><code>nowrap</code></th>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Recolhido</span></td>
   <td>Sem quebra</td>
  </tr>
  <tr>
   <th><code>pre</code></th>
   <td>Preservado</td>
   <td>Preservado</td>
   <td>Sem quebra</td>
  </tr>
  <tr>
   <th><code>pre-wrap</code></th>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Preservado</span></td>
   <td>Preservado</td>
   <td>Quebra</td>
  </tr>
  <tr>
   <th><code>pre-line</code></th>
   <td><span style="background-color: rgba(212, 221, 228, 0.14902);">Preservado</span></td>
   <td>Recolhido</td>
   <td>Quebra</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples" name="Examples">Exemplos</h2>

<pre class="brush: css">code {
  white-space: pre;
}</pre>

<h2 id="Specifications" name="Specifications">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#propdef-white-space', 'white-space')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Aumenta a precisão dos algoritmos de quebra.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'text.html#white-space-prop', 'white-space')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Especificação inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade de Navegadores</h2>

<p>{{Compat("css.properties.white-space")}}</p>

<div id="compat-mobile"> </div>

<p>[1] Internet Explorer 5.5+ suporta {{Cssxref("word-wrap")}}<code>: break-word;</code><br>
 O código a seguir permite quebras de linhas dentro de elementos <span style="font-family: consolas,monaco,andale mono,monospace;">pre:</span></p>

<pre class="brush: css">pre {
  word-wrap: break-word;      /* IE 5.5-7 */
  white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
  white-space: pre-wrap;      /* current browsers */
}</pre>