Свойство 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
читабельность текста для пользователей с ограниченными возможностями. Например, длинные строки без переносов могут быть сложны для чтения в скринридерах или при увеличении масштаба страницы.