Пробелы и переносы строки в CSS

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

Свойство white-space в CSS определяет, как обрабатывать пробелы и переносы строки внутри элемента. Это свойство позволяет контролировать отображение текста на странице, особенно при работе с многострочными блоками текста.

Давайте рассмотрим подробнее, как работает это свойство и каким образом можно использовать его в коде.

Варианты значения свойства white-space:

1. normal

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

.white-space-example {
  white-space: normal;
}
  

Пример:

<div class="white-space-example">
  Это текст с пробелами и переносами строки.
  В результирующем отображении они будут отображаться сжатыми и переноситься, когда это будет необходимо.
</div>
  

2. nowrap

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

.white-space-example {
  white-space: nowrap;
}
  

Пример:

<div class="white-space-example">
  Это текст без переносов и переноса на новую строку. Он будет отображаться в одну линию, без учета дополнительных пробелов.
</div>
  

3. pre

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

.white-space-example {
  white-space: pre;
}
  

Пример:

<div class="white-space-example">
  Это текст с        вставленными дополнительными пробелами и 
  переносами строки, которые сохраняются при отображении на странице.
</div>
  

4. pre-wrap

Пробелы и переносы строки сохраняются, как есть. Текст переносится на новую строку по мере необходимости, чтобы соответствовать ширине блока.

.white-space-example {
  white-space: pre-wrap;
}
  

Пример:

<div class="white-space-example">
  Это текст с дополнительными пробелами и переносами строки.
  Он будет отображаться с сохраненными пробелами и переносами строки, а также переноситься при необходимости.
</div>
  

5. pre-line

Пробелы сохраняются, а переносы строки переносятся, как будто они обычные пробелы.

.white-space-example {
  white-space: pre-line;
}
  

Пример:

<div class="white-space-example">
  Это текст с дополнительными пробелами и переносами строки.
  Будут отображены только пробелы, а переносы строки будут проигнорированы.
</div>
  

Таким образом, свойство white-space в CSS позволяет контролировать обработку пробелов и переносов строки в тексте. Использование конкретного значения зависит от требуемого отображения текста на странице.