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

Значения свойства white-space

• normal: Это значение по умолчанию. Пробелы и переносы строк сливаются в один пробел. Текст автоматически переносится на новую строку, чтобы соответствовать ширине контейнера.
• nowrap: Текст не переносится на новую строку, а пробелы и переносы строк сливаются. Это полезно, когда вы не хотите, чтобы текст обтекал внутри узкого контейнера.
• pre: Пробелы и переносы строк сохраняются, как в исходном коде. Текст не переносится автоматически, что позволяет сохранить форматирование, заданное в HTML.
• pre-wrap: Пробелы и переносы строк сохраняются, но текст может переноситься на новую строку по границам контейнера.
• pre-line: Пробелы сливаются, но переносы строк сохраняются. Текст переносится на новую строку по границам контейнера и там, где в HTML заданы переносы строк.

Примеры использования

/* Объединение пробелов и автоматический перенос текста */
.normal-text {
  white-space: normal;
}


/* Предотвращение переноса текста на новую строку */
.nowrap-text {
  white-space: nowrap;
}


/* Сохранение форматирования текста, как в HTML */
.pre-text {
  white-space: pre;
}


/* Сохранение пробелов и переносов с автоматическим переносом по ширине */
.pre-wrap-text {
  white-space: pre-wrap;
}


/* Объединение пробелов с сохранением переносов строк из HTML */
.pre-line-text {
  white-space: pre-line;
}

Когда использовать

Отображение кода или преформатированного текста: Используйте white-space: pre; или white-space: pre-wrap;, чтобы сохранить исходное форматирование кода или текста, где важно сохранение пробелов и переносов строки.

Управление переносами в узких контейнерах: white-space: nowrap; предотвращает перенос текста, что может быть полезно для заголовков, кнопок или других элементов с коротким текстом, который должен отображаться в одну строку.

Адаптивное содержимое: white-space: pre-line; полезно для контента, который должен адаптироваться к ширине контейнера, сохраняя при этом явные переносы строк для лучшей читабельности.

Лучшие практики

Тестирование на разных устройствах: Убедитесь, что ваше использование white-space выглядит хорошо на различных экранах и в разных браузерах, особенно при использовании nowrap и pre-wrap.

Комбинирование с другими стилевыми свойствами: Иногда для достижения желаемого эффекта в оформлении текста может потребоваться комбинация white-space с другими свойствами, такими как overflow и text-overflow. Это может помочь управлять текстом, выходящим за пределы элемента, и предотвратить нарушение макета.

Доступность: Проверьте, не затрудняет ли выбранное поведение white-space читабельность текста для пользователей с ограниченными возможностями. Например, длинные строки без переносов могут быть сложны для чтения в скринридерах или при увеличении масштаба страницы.