white-space

Это свойство задаёт два параметра:

• Сжимается ли и как сжимается пробел.
• Перенос строк — включён или нет и как.

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

normal

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

nowrap

Сжимает пробелы, как и значение normal, но подавляет разрывы строк (перенос текста) в исходном коде.

pre

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

pre-wrap

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

pre-line

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

break-spaces

Поведение идентично pre-wrap, за исключением:

• Любая последовательность сохраняемых пробелов всегда занимает место, включая в конце строки.
• Возможность разрыва строки существует после каждого сохраняемого символа пробела, включая между символами пробела.
• Такие сохранённые пробелы занимают место и не висят, тем самым влияя на внутренние размеры бокса (min-content размер и max-content размер).

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

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

Страница свойства white-space-collapse описывает алгоритм браузера для сжатия пробелов.

white-space = 
  normal        |
  pre           |
  nowrap        |
  pre-wrap      |
  break-spaces  |
  pre-line      

HTML

<table>
  <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>
</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;
}

Результат

Свойство white-space CSS может использоваться для создания нескольких строк в элементе <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