html-pre-tag.png

Вы наверное не раз замечали, что при использовании тега PRE или CODE для отображения какого-то куска кода получается весьма некрасивая картина. А именно: строки отображаюся без переносов, растягивая и портя дизайн сайта. До того как я написал прошлую заметку я особо не заморачивался данной проблемой. Сегодня же пришлось погуглить и найти красивое CSS решение проблемы:

1
2
3
4
5
6
7

pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Понравилась статья? Добавь в закладки или поделись ссылкой с другими:
  • Twitter
  • FriendFeed
  • Tumblr
  • Facebook
  • LinkedIn
  • Add to favorites
  • del.icio.us
  • Diigo
  • email
  • Print
  • RSS

Похожие статьи:

  1. Как Internet Explorer поддерживает CSS? Как Internet Explorer поддерживает CSS?
  2. Cufon или Typeface.js – что лучше? Cufon или Typeface.js – что лучше?
  3. На заметку: кроссбраузерный CSS display: inline-block На заметку: кроссбраузерный CSS display: inline-block
  4. Facebox IE6 png transparency fix! Facebox IE6 png transparency fix!