# Свойство white-space

Свойство `white-space` устанавливает как переносить текст на новую строку, а также как отображать пробелы между словами и переносы строк (места, где был нажат `Enter` при наборе кода).

## Синтаксис

`селектор { white-space: nowrap | pre | pre-line | pre-wrap | normal; }`

## Значения

Значение | Описание
--- | ---
`nowrap` | Запрещает тексту переносится на другую строку, даже если он не помещается в ширину контейнера (в этом случае текст просто вылезет за его границы). Однако, добавление тега `br` заставит текст перенестись на новую строку.
`pre` | Текст показывается так, как был набран в блокноте при верстке сайта: со всеми пробелами и enter-ами (если в коде набрано несколько пробелов - на экране тоже будет несколько). При этом браузер не будет переносить текст на новую строку, если он не помещается в контейнер - текст просто вылезет за его границы. Аналог тега pre, но в отличие от него не меняет шрифт на моноширинный (про моноширинный шрифт см. свойство `font-family`.
`pre-wrap` | То же самое, что и pre, отличие в том, что если текст слишком длинный и не влазит в контейнер - браузер перенесет его на другую строку.
`pre-line` | Браузер учитывает только Enter-ы в HTML коде и игнорирует все остальное (несколько пробелов будут выглядеть как один, браузер сам расставляет разрывы строк).
`normal` | Стандартное поведение: браузер сам расставляет разрывы строки так, чтобы слова поместились в контейнер. Несколько пробелов в коде будут выглядеть как один на экране.

Значение по умолчанию: `normal`.

## Пример . Значение nowrap

В данном примере текст не поместится в контейнер и вылезет за его границы, так как задано значение `nowrap`:

`<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div>` `#elem { width: 200px; white-space: nowrap; border: 1px solid red; }`

:

## Пример . Значение nowrap и тег br

Если добавить тег `br` - текст перенесется на новую строку (именно в том месте, где стоит `br`):

`<div id="elem"> Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire. </div>` `#elem { width: 200px; white-space: nowrap; border: 1px solid red; }`

:

## Пример . Значение pre

В данном примере текст показывается так, как был набран в редакторе HTML кода (со всеми отступами клавишей `Tab`, с `Enter` и так далее):

`<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div>` `#elem { width: 200px; white-space: pre; border: 1px solid red; }`

:

## Пример . Значение pre-wrap

А сейчас текст показывается так, как был набран в редакторе HTML кода, однако, вылезающие части переносятся на новую строку:

`<div id="elem"> Lorem ipsum dolor sit amet, consectetur adipiscing elitorire. </div>` `#elem { width: 200px; white-space: pre-wrap; border: 1px solid red; }`

:

## Смотрите также

- свойства `word-break` и `overflow-wrap`,
  которые позволяют перенести буквы длинного слова на новую строку
- свойство `tab-size`,
  которое устанавливает размер отступа, созданного клавишей Tab
- свойство `hyphens`,
  которое включает переносы слов по слогам
- свойство `overflow`,
  которое обрезает вылезающие за границу блока части
- тег `pre`,
  который показывает текст так, как он был набран в редакторе HTML кода

←→
↑