html.okpython.net
Основы создания сайтов
CSS :: Свойство white-space
css-свойство white-space (от англ. white-space – пробел) используется для определения способа обработки пробельных символов и переносов строк внутри элемента.
Характеристики
- Значение по умолчанию: normal.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.whiteSpace="value".
Синтаксис
white-space: normal | nowrap | pre | pre-line | pre-wrap
Значения
- normal – все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически.
- pre – текст форматируется аналогично содержимому тега <pre>, т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются.
- nowrap – текст отображается одной строкой, подряд идущие пробельные символы заменяются одним пробелом, переносы строк в коде HTML игнорируются, автоматические переносы строк не добавляются, действительны только принудительные разрывы строк, сделанные при помощи тегов <br>.
- pre-wrap – все подряд идущие пробельные символы и переносы строк сохраняются, но разрывы строк добавляются браузером автоматически.
- pre-line – все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются, а также по необходимости браузером добавляются автоматические переносы.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-text-3/#propdef-white-space
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/white-space
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 450px; margin: 3em; } .p_1{ white-space: normal; background-color: red } .p_2{ white-space: pre; background-color: blue } .p_3{ white-space: nowrap; background-color: green } .p_4{ white-space: pre-wrap; background-color: yellow } .p_5{ white-space: pre-line; background-color: violet } </style> </head> <body> <p class="p_1"> normal: используется значение браузера по умолчанию, т.е. все пробельные символы и переносы строк в коде HTML преобразуются в один пробел, а разрывы строк добавляются браузером автоматически. </p> <p class="p_2"> pre: текст форматируется аналогично содержимому элемента «pre», т.е. отображается так, как вводит его пользователь: сохраняются все подряд идущие пробельные символы и переносы строк, автоматические переносы не добавляются. </p> <p class="p_3"> nowrap: текст отображается одной строкой, подряд идущие пробельные символы <br> заменяются одним пробелом, переносы строк в коде HTML игнорируются , <br> автоматические переносы строк не добавляются, действительны только <br> принудителььные разрывы строк, сделанные <br> при помощи элементов «br». </p> <p class="p_4"> pre-wrap: все подряд идущие пробельные символы и переносы строк сохраняются , но разрывы строк добавляются браузером автоматически. </p> <p class="p_5"> pre-line: все подряд идущие пробельные символы заменяются одним пробелом, но переносы строк в коде HTML сохраняются , а также по необходимости браузером добавляются автоматические переносы. </p> </body> </html>
Пример №1