Реальный пиарHTMLУроки HTML → Свойство white-space: теги PRE и NOBR в одном флаконе

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

Нам зачастую приходится контролировать пробелы и переводы строк (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. Потому-то, наверное, это свойство и используют так редко…


Источник: http://htmlcssjs.ru

Рекомендуем



Блочная модель (Box Model) - основа CSS Благодаря CSS мы можем переопределить характеристики каждого блока-прямоугольника - его положение на странице, цвета, толщину и наличие границ, а также шрифт и оформление содержимого блока


Как вставить видео на сайт Но выход из этого положения есть: исползовать сторонный сервис хранения файлов, например, Amazon S3, о котором я расскажу в одной из следующих статей, так что не переключайтесь


Сокращённые формы записи (font, margin, padding и пр.) Для избежания конфликтов с пользовательской таблицей стилей, рекомендуется помимо свойства background указывать также свойство color