white-space
Что делать с пробелами и переносами строк из исходного кода и можно ли переносить строки.
Синтаксис
white-space: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| normal | keyword | Пробелы схлопываются, строки переносятся (по умолчанию). |
| nowrap | keyword | Пробелы схлопываются, но текст остаётся в одну строку. |
| pre | keyword | Пробелы и переносы сохраняются как в коде, без переноса строк — как в `<pre>`. |
| pre-wrap | keyword | Пробелы и переносы сохраняются, длинные строки переносятся. |
| pre-line | keyword | Переносы сохраняются, лишние пробелы схлопываются. |
Примеры
Без переноса и с сохранёнными переносами строк:
<style>
div { width: 160px; border: 1px solid lightgray; margin-bottom: 8px; }
</style>
<div style="white-space: nowrap;">This line never wraps to the next one</div>
<div style="white-space: pre-line;">Line breaks
are kept here
as in the source</div>Примечания
nowrap полезен для цен, дат и кнопок, которые нельзя разрывать, вроде «$1 200». pre-wrap подходит для текста, который пользователь ввёл в <textarea>.
См. также
- text-overflow — Как обрезается текст, который не помещается: резко или с многоточием.
- overflow-wrap — Разрешает разрывать длинное слово, чтобы оно не вылезало за блок.
- word-break — Можно ли разрывать слова между любыми буквами.
Вопросы и ответы по теме
В учебнике
- Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.