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
|
---
title: white-space
slug: Web/CSS/white-space
translation_of: Web/CSS/white-space
---
<div>{{CSSRef}}</div>
<div>Свойство <code><strong>white-space</strong></code> управляет тем, как обрабатываются {{Glossary("whitespace", "пробельные символы")}} внутри элемента.</div>
<div></div>
<div>{{EmbedInteractiveExample("pages/css/white-space.html")}}</div>
<div class="hidden">Исходный код примеров хранится на GitHub. Если вы хотите улучшить примеры, скопируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на изменение.</div>
<div class="note">
<p><strong>Примечание:</strong> Для управления переносами <em>внутри слов</em> используйте {{CSSxRef("overflow-wrap")}}, {{CSSxRef("word-break")}} или {{CSSxRef("hyphens")}}.</p>
</div>
<h2 id="Сводка">Сводка</h2>
<pre class="brush: css no-line-numbers">/* Ключевые значения */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
/* Глобальные значения */
white-space: inherit;
white-space: initial;
white-space: unset;
</pre>
<p>{{CSSInfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<p>Свойство <code>white-space</code> определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы. </dd>
<dt><code>nowrap</code></dt>
<dd>Объединяет последовательности пробелов в один пробел, как значение <code>normal</code>, но не переносит строки (оборачивание текста) внутри текста.</dd>
<dt><code>pre</code></dt>
<dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}.</dd>
<dt><code>pre-wrap</code></dt>
<dd>Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов.</dd>
<dt><code>pre-line</code></dt>
<dd>Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам {{HTMLElement("br")}}, и при необходимости для заполнения строчных боксов..</dd>
<dt><code>break-spaces</code></dt>
<dd>Поведение идентично <code>pre-wrap</code> со следующими отличиями:
<ul>
<li>Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.</li>
<li>Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.</li>
<li>Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).</li>
</ul>
</dd>
</dl>
<p>В приведённой ниже таблице указано поведение различных значений свойства <code>white-space</code>:</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>Объединяются в один пробел</td>
<td>Переносится</td>
<td>Удаляются</td>
</tr>
<tr>
<th><code>nowrap</code></th>
<td>Объединяются в одну</td>
<td>Объединяются в один пробел</td>
<td>Не переносится</td>
<td>Удаляются</td>
</tr>
<tr>
<th><code>pre</code></th>
<td>Сохраняются как в источнике</td>
<td>Сохраняются как в источнике</td>
<td>Не переносится</td>
<td>Сохраняются как в источнике</td>
</tr>
<tr>
<th><code>pre-wrap</code></th>
<td>Сохраняются как в источнике</td>
<td>Сохраняются как в источнике</td>
<td>Переносится</td>
<td>Висят</td>
</tr>
<tr>
<th><code>pre-line</code></th>
<td>Сохраняются как в источнике</td>
<td>Объединяются в один пробел</td>
<td>Переносится</td>
<td>Удаляются</td>
</tr>
<tr>
<th><code>break-spaces</code></th>
<td>Сохраняются как в источнике</td>
<td>Сохраняются как в источнике</td>
<td>Переносится</td>
<td>Переносятся</td>
</tr>
</tbody>
</table>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{CSSSyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Основной_пример">Основной пример</h3>
<pre class="brush: css">code {
white-space: pre;
}</pre>
<h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3>
<pre class="brush: css">pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: pre-wrap; /* текущие браузеры */
}</pre>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Браузерная_совместимость">Браузерная совместимость</h2>
<p>{{Compat}}</p>
|
