5 августа буду в отъезде. отвечаю по возможности

Свойство 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 кода