При вставке примеров кода на страницы веб мастера обычно используют пробелы для отступов. Теги <code> и <pre> прекрасно отображают отступы, но тут есть и обратная сторона медали - если строка очень длинная, то она может вылезти за пределы контейнера. В этой небольшой статье я покажу как использовать перенос длинных строк в форматированных текстах во всех браузерах.
Добавьте в свою таблицу стилей следующий код:
pre, code {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, начиная с 1999 года */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Следует заметить, что при использовании данной техники, ваш файл стилей перестанет быть валидным, но я считаю это небольшой платой за кроссплатформенность.
@ 07 Декабря 2007 в 00:42
Никогда не заморачивался и писал код так чтобы вмещался в контейнер без переносов. Искуственный перенос - зло, так как трудно потом в нём разбираться, поскольку почти нигде в программировании нельзя разрывать строку.
@ 07 Декабря 2007 в 10:32
Ну невсегда это зло, например, я при написании примеров к статьям стараюсь контроллировать код и иногда могу пропустить где-нибудь перенос строки. А читатели скорее всего просто скопируют копи-пастом ваш код и он не будет содержать лишних переносов.
@ 07 Декабря 2007 в 17:14
Мне кажется, удобнее для этой цели использовать overflow:auto, тогда у блока появятся горизонтальный и вертикальный скроллы, строки не будут разрываться, и код не вылезет за пределы контейнера.
@ 07 Декабря 2007 в 17:38
Ну не нравятся мне скроллы, не удобно с ними, к тому же может появиться вертикальная прокрутка с overflow:auto; Хотя как говорится на вкус и цвет товарищей нет и пусть каждый использует то, что удобно ему!
@ 10 Декабря 2007 в 11:41
Спасибо за информацию. Не подскажите, где можно обозреть нестандартные штуки рода "-moz-*" и "-o-*"?
@ 10 Декабря 2007 в 17:42
Для браузеров на движке Mozilla (NETSCAPE, Firefox) смотрите на официальном сайте:
http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions
Атрибуты IE:
http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp
Поддержка CSS Opera 9:
http://www.opera.com/docs/specs/opera9/css/index.dml
Расширения для браузеров на движке WebKit (Safari):
http://qooxdoo.org/documentation/general/webkit_css_styles
Вроде никого больше не забыл :-)
@ 08 Февраля 2008 в 18:47 А как же IE? :) Он в таких случаях ещё и overflow: scroll перестаёт понимать...
@ 09 Февраля 2008 в 16:13
Вы уж определитесь Вам scroll нужен или перенос длинных строк, это две совершенно противоположные вещи! Я например использую в своем блоге так же как на этом сайте сделано.
@ 28 Апреля 2008 в 21:04
Спасибо!