Нам зачастую приходится контролировать пробелы и переводы строк (whitespace) с помощью тегов pre, nobr и табличного свойства nowrap. Но всё это можно совместить в одном справочном CSS свойстве white-space.
Нам зачастую приходится контролировать пробелы и переводы строк (whitespace) с помощью тегов pre
, nobr
и табличного свойства nowrap
. Когда мы хотим сохранить элементарное форматирование текста, мы используем тег pre
, который сохраняет пробелы и переводы строк. Если же нам нужно сделать так, чтобы текст не переносился ни при каких обстоятельствах (исключение — насильственная установка br
), то на помощь приходит нестандартный тег nobr
и свойство nowrap
.
Но все эти особенности вёрстки можно совместить в CSS свойстве white-space
. По спецификации оно имеет несколько значений, о функции которых можно догадаться из их названия: normal
| pre
| nowrap
| inherit
.
Наиболее важными являются значения pre
и nowrap
. Приведу наглядные варианты их использования:
<div style="white-space:pre">Если б я жил в Сахаре,
я бы писал о песке:
о красном песке — в ударе,
о сером песке — в тоске.</div>
Если б я жил в Сахаре,
я бы писал о песке:
о красном песке — в ударе,
о сером песке — в тоске.
<div style="white-space:nowrap">Для получения самого оптимально результата изменяй себя, будь гибким.</div>
Для получения самого оптимально результата изменяй себя, будь гибким.
А теперь самое интересное. Поддержка браузерами свойства white-space
. Тут, к сожалению, присутствует некоторая несуразица. Самым примечательным является то, что Internet Explorer вплоть до шестой (!) версии не признаёт значение pre
, когда как даже «старичок» Netscape Navigator 4.x отлично его воспринимает. Opera же ещё с четвёртой версии полностью поддерживает свойство white-space
. Для полноты картины давайте посмотрим на следующую табличку:
white-space |
IE 5.5,6+ |
NN 4.x |
NN 6/Mozilla |
Opera 4+ |
normal |
+ |
+ |
+ |
+ |
pre |
|
+ |
+ |
+ |
nowrap |
+ |
|
+ |
+ |
inherit |
|
|
+ |
+ |
Следует заметить, что IE до версии 5.5 совершенно не признавал свойство white-space
. Потому-то, наверное, это свойство и используют так редко…
P. S. Вскоре после написания этой заметки я решил посмотреть, что думает о свойстве white-space
MSDN и обнаружил интересную вещь. Оказывается, что IE6 поддерживает-таки значение pre
. Для этого, правда, должен быть указан «правильный» !DOCTYPE
.