Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Свойство white-space: теги PRE и NOBR в одном флаконе

20 августа 2002 г.

Нам зачастую приходится контролировать пробелы и переводы строк (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">Если б я жил в Сахаре,
я бы писал о песке:
о красном песке &mdash; в ударе,
о сером песке &mdash; в тоске.</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.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet