PRE и NOWRAP в CSS: свойство white-space

19 февраля 2010 8 Рубрика: HTML&CSS, Важные мелочи

« Предыдущая запись
 		   Следующая запись »
 

Пишу в качестве напоминания, что в CSS есть аналог тегов <PRE> и <NOBR>, а также свойства таблиц NOWRAP - название ему white-space. Это свойство устанавливает, как отображать пробелы в тексте, а именно:

  1. white-space: normal. Значение по умолчанию, текст ведёт себя как обычно.
  2. white-space: nowrap. Текст идёт одной строкой, переносов не происходит, за исключением вручную расставленных, например, тегом <br>. Если обрамить текст тегом nobr (<nobr>текст</nobr>), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать - решать вам.
  3. white-space: pre. Выводит текст с пробелами и переносами, как оно было оформлено в коде html. Если строка будет слишком длинной и не помещаться в окно браузера, то появится горизонтальная полоса прокрутки. Имеется два нюанса: 1) аналогом является тег <pre>, но, в отличие от него, не меняет шрифт на моноширинный; 2) не работает в IE6 и младше; 3) работает в  IE7 только при указании <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
  4. white-space: pre-wrap. Выводит текст с пробелами и переносами, но если строка слишком длинная, то происходит перенос. Не поддерживается IE7 и младше.
  5. white-space: pre-line. Выводит текст с переносами, как было в коде html, но дополнительные пробелы игнорируются (последовательность пробелов отображается как один пробел). Линии также подгоняются по размеру. Не поддерживается IE7 и младше.

В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.

 

В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) - текст в тегах PRE не переносится, а скролится. Для этого был создан универсальный метод (ссылка на оригинал), который я ниже и приведу.

pre {
      white-space: pre;           /* CSS2 */
      white-space: pre-wrap;      /* CSS 2.1 */
      white-space: pre-line;      /* CSS 2.1/3 */
      white-space: -moz-pre-wrap; /* Mozilla */
      white-space: -hp-pre-wrap;  /* HP printers */
      white-space: -o-pre-wrap;   /* Opera 7 */
      white-space: -pre-wrap;     /* Opera 4-6 */
      word-wrap: break-word;      /* Только для динозавра IE */
}

Это наиболее полный код, однако и его можно сократить. Для начала удалим вторую строку, так как она бесполезна - зачем говорить тегу pre, чтобы он вёл себя как тег pre. Четвёртую строку тоже можно удалить, так как свойство удаляет дополнительные пробелы, а они нужны. Шестую строку также можно опустить, сами догадайтесь почему. По большому счёту можно вообще оставить только третью и девятую строки, так как даже седьмая опера уже канула в лету.

 

Пожалуй это всё, что нужно знать о white-space. До новых встреч! =)


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Скад
    16/11/2010 at 23:21 Постоянная ссылка Цитировать

    Кстати не стоит смотреть на это как на бесполезное, вполне себе полезный параметр

  2. Александр Шуйский
    17/11/2010 at 0:03 Постоянная ссылка Цитировать

    никто и не говорил, что это бесполезное, скорее наоборот )

  3. Скад
    17/11/2010 at 0:19 Постоянная ссылка Цитировать

    Спасибо за статью. Честно говоря всегда верстал без спец. параметров)

  4. Александр Шуйский
    17/11/2010 at 17:21 Постоянная ссылка Цитировать

    Пожалуйста!
    А в учебниках обычно про спец.параметры забывают неведомым образом

  5. Игорь
    08/02/2011 at 2:44 Постоянная ссылка Цитировать

    Спасибо огромное!!!!
    Три часа карячился… а тут нашел решение! Спасибо за статью!

  6. Александр Шуйский
    08/02/2011 at 9:07 Постоянная ссылка Цитировать

    Пожалуйста! Уверен, что много чего интересного ещё у меня можно накопать, так что подписывайтесь на продолжение =)

  7. Даниил Сафронов
    14/12/2012 at 10:04 Постоянная ссылка Цитировать

    Спасибо за инфу… А то, то ли запросы не правильные вставлял, то ли тема редкая, то ли пишут невнятно. Но то, что мне было надо нашел только в вашей статье.
    Еще раз огромное спасибо :)

  8. Александр Шуйский
    14/12/2012 at 11:51 Постоянная ссылка Цитировать

    Большое спасибо за отзыв!
    Да, очень часто встречаю простые и популярные темы, но написанные через одно место, где без поллитра не разобраться. Именно поэтому я беру иногда заезженные темы и стараюсь их рассмотреть со всех сторон и донести максимально внятно и понятно. Спасибо, что подтверждаете, что не зря стараюсь :)