Просмотров: 905

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

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

17-03-2013 11-29-00

Вот пример:

Все лишние пробелы и переносы строки, которые отображаются в исходном коде, на веб-странице будут удалены.

Такое положение вещей не всегда может быть полезно. Иногда нужно отобразить текст именно так, как он выглядит в исходном коде. Например, если мы публикуем, какие-то стихотворные формы, форматированный программный код и.т.д.

Для этой цели мы можем воспользоваться элементом <pre>:

Но, добавлять элемент pre в исходный код не всегда удобно и не всегда возможно. Было бы очень хорошо добавить тот же эффект, но только с помощью стилей CSS.

Действительно, в CSS есть специальное свойство, которое позволяет добиться того же эффекта, который мы получаем при использовании тега pre.

Это свойство называется white-space.

В переводе с англ. «белое пространство». Под «белым» понимаются пробелы и переносы строк, которые находятся в исходном HTML-коде веб-страницы. Свойство white-space определяет то, как браузер будет воспринимать и отображать эти элементы на веб-странице.

Вот значения, которые возможны для этого свойства:

white-space: normal | nowrap | pre | pre-line | pre-wrap | inherit

Давайте разберем каждое из них более подробно.

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

normal

nowrap – Множество пробелов заменяется одним, переносы строк игнорируются, весь текст будет отображаться одной строкой. Только добавлением тега <br> можно выполнить перенос на новую строку.

nowrap

pre – Сколько пробелов вы поставите, столько и отобразится на веб-странице. Переносы строк в исходном коде также будут учитываться. Мы получаем, своего рода, аналог тэга <pre>.

pre

pre-line – Множество пробелов заменяется одним, но переносы строк в исходном коде будут учитываться.

pre-line

pre-wrap – Сколько пробелов вы поставите, столько и отобразится на веб-странице. Переносы строк в исходном коде также будут учитываться + если строка не будет помещаться в ширину контейнера, то она будет перенесена на следующую строку.

17-03-2013 15-55-07

inherit – наследуется значение white-space от родительского элемента.

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

Используйте это знание на практике и располагайте текст на веб-страницах так, как вы этого хотите.