Свойство CSS `white-space`

white-space — CSS-свойство сокращённой записи, определяющее, как обрабатываются пробельные символы внутри элемента.

Попробуйте

white-space: normal;

white-space: pre;

white-space: pre-wrap;

white-space: pre-line;

white-space: wrap;

white-space: collapse;

white-space: preserve nowrap;

<section class="default-example" id="default-example">
  <div id="example-element">
    <p>
      But ere she from the church-door stepped She smiled and told us why: 'It
      was a wicked woman's curse,' Quoth she, 'and what care I?' She smiled, and
      smiled, and passed it off Ere from the door she stept—
    </p>
  </div>
</section>

#example-element {
  width: 16rem;
}

#example-element p {
  border: 1px solid #c5c5c5;
  padding: 0.75rem;
  text-align: left;
}

Свойство определяет два параметра:

• Сворачиваются ли пробельные символы и каким образом.
• Переносятся ли строки и каким образом.

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• white-space-collapse
• text-wrap-mode

Синтаксис

/* Single keyword values */
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

/* white-space-collapse and text-wrap-mode shorthand values */
white-space: nowrap;
white-space: wrap;
white-space: break-spaces;
white-space: collapse;
white-space: preserve nowrap;

/* Global values */
white-space: inherit;
white-space: initial;
white-space: revert;
white-space: revert-layer;
white-space: unset;

Значения

Значения свойства white-space можно указать с помощью одного или двух ключевых слов, представляющих значения свойств white-space-collapse и text-wrap-mode, либо следующих специальных ключевых слов:

normal

Последовательности пробельных символов сворачиваются. Символы новой строки в исходном тексте обрабатываются так же, как и другие пробельные символы. Строки переносятся при необходимости, чтобы заполнить строчные блоки. Эквивалентно collapse wrap.

pre

Последовательности пробельных символов сохраняются. Строки переносятся только в местах символов новой строки в исходном тексте и элементов <br>. Эквивалентно preserve nowrap.

pre-wrap

Последовательности пробельных символов сохраняются. Строки переносятся в местах символов новой строки, элементов <br>, а также при необходимости, чтобы заполнить строчные блоки. Эквивалентно preserve wrap.

pre-line

Последовательности пробельных символов сворачиваются. Строки переносятся в местах символов новой строки, элементов <br>, а также при необходимости, чтобы заполнить строчные блоки. Эквивалентно preserve-breaks wrap.

В следующей таблице описано поведение этих четырёх ключевых слов-значений свойства white-space:

По умолчанию ширина табуляции равна 8 пробелам; её можно настроить с помощью свойства tab-size. При значениях normal, nowrap и pre-line каждый символ табуляции преобразуется в пробел (U+0020).

Формальное определение

Формальный синтаксис

white-space = 
  normal |
  pre |
  pre-wrap |
  pre-line |
  <'white-space-collapse'> ||
  <'text-wrap-mode'>

Примеры

Основной пример

code {
  white-space: pre;
}

Переносы строк внутри элементов <pre>

pre {
  white-space: pre-wrap;
}

В действии

<div id="css-code" class="box">
  p { white-space:
  <select>
    <option>normal</option>
    <option>nowrap</option>
    <option>pre</option>
    <option>pre-wrap</option>
    <option>pre-line</option>
    <option>break-spaces</option>
  </select>
  }
</div>
<div id="results" class="box">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

.box {
  width: 350px;
  padding: 16px;
}

#css-code {
  background-color: gainsboro;
  font-size: 16px;
  font-family: monospace;
}

#css-code select {
  font-family: inherit;
  width: 100px;
}

#results {
  background-color: rgb(230 230 230);
  overflow-x: scroll;
  white-space: normal;
  font-size: 14px;
}

const select = document.querySelector("#css-code select");
const results = document.querySelector("#results p");
select.addEventListener("change", (e) => {
  results.style.setProperty("white-space", e.target.value);
});

Управление переносом строк в таблицах

HTML

<table>
  <tbody>
    <tr>
      <td></td>
      <td>Very long content that splits</td>
      <td class="nw">Very long content that don't split</td>
    </tr>
    <tr>
      <td class="nw">white-space:</td>
      <td>normal</td>
      <td>nowrap</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
  border: solid black 1px;
  width: 250px;
  height: 150px;
}
td {
  border: solid 1px black;
  text-align: center;
}
.nw {
  white-space: nowrap;
}

Результат

Несколько строк в текстовом элементе SVG

Свойство CSS white-space можно использовать для создания нескольких строк в элементе <text>, в котором по умолчанию перенос строк не выполняется.

HTML

Текст внутри элемента <text> необходимо разделить на несколько строк, чтобы распознавались символы новой строки. После первой строки пробельные символы в остальной части текста необходимо удалить.

<svg viewBox="0 0 320 150">
  <text y="20" x="10">Here is an English paragraph
that is broken into multiple lines
in the source code so that it can
be more easily read and edited
in a text editor.
  </text>
</svg>

CSS

text {
  white-space: break-spaces;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Свойства, определяющие, как слова переносятся внутри себя: overflow-wrap, word-break, hyphens
• tab-size
• Обработка пробельных символов в CSS