Пишу в качестве напоминания, что в CSS есть аналог тегов <PRE> и <NOBR>, а также свойства таблиц NOWRAP - название ему white-space. Это свойство устанавливает, как отображать пробелы в тексте, а именно:
-
white-space: normal. Значение по умолчанию, текст ведёт себя как обычно.
-
white-space: nowrap. Текст идёт одной строкой, переносов не происходит, за исключением вручную расставленных, например, тегом <br>. Если обрамить текст тегом nobr (<nobr>текст</nobr>), то мы получим тот же эффект, что и через свойство css. Аналогично достигается в таблице путём дописки параметра nowrap в теге td. Так что всё на вкус и на цвет, а что использовать - решать вам.
-
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">.
-
white-space: pre-wrap. Выводит текст с пробелами и переносами, но если строка слишком длинная, то происходит перенос. Не поддерживается IE7 и младше.
-
white-space: pre-line. Выводит текст с переносами, как было в коде html, но дополнительные пробелы игнорируются (последовательность пробелов отображается как один пробел). Линии также подгоняются по размеру. Не поддерживается IE7 и младше.
В общем, white-space: pre и white-space:nowrap имеют место для частого использования (особенно второй, так как кроссбраузерен), а два последних под вопросом. Тем не менее.
В рамках white-space опишу одну проблему, возникающую с хайлайтерами (скрипты, которые подсвечивают код в блогах) - текст в тегах 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. До новых встреч! =)
(голосов: 2, средний: 5.00 из 5)
Загрузка ...
16/11/2010 at 23:21 Постоянная ссылка Цитировать
Кстати не стоит смотреть на это как на бесполезное, вполне себе полезный параметр
17/11/2010 at 0:03 Постоянная ссылка Цитировать
никто и не говорил, что это бесполезное, скорее наоборот )
17/11/2010 at 0:19 Постоянная ссылка Цитировать
Спасибо за статью. Честно говоря всегда верстал без спец. параметров)
17/11/2010 at 17:21 Постоянная ссылка Цитировать
Пожалуйста!
А в учебниках обычно про спец.параметры забывают неведомым образом
08/02/2011 at 2:44 Постоянная ссылка Цитировать
Спасибо огромное!!!!
Три часа карячился… а тут нашел решение! Спасибо за статью!
08/02/2011 at 9:07 Постоянная ссылка Цитировать
Пожалуйста! Уверен, что много чего интересного ещё у меня можно накопать, так что подписывайтесь на продолжение =)
14/12/2012 at 10:04 Постоянная ссылка Цитировать
Спасибо за инфу… А то, то ли запросы не правильные вставлял, то ли тема редкая, то ли пишут невнятно. Но то, что мне было надо нашел только в вашей статье.
Еще раз огромное спасибо
14/12/2012 at 11:51 Постоянная ссылка Цитировать
Большое спасибо за отзыв!
Да, очень часто встречаю простые и популярные темы, но написанные через одно место, где без поллитра не разобраться. Именно поэтому я беру иногда заезженные темы и стараюсь их рассмотреть со всех сторон и донести максимально внятно и понятно. Спасибо, что подтверждаете, что не зря стараюсь