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