Кроссплатформенный способ переноса длинных строк не умещающихся в контейнеры <code> и <pre>
При вставке примеров кода на страницы веб мастера обычно используют пробелы для отступов. Теги <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+ */
}
Следует заметить, что при использовании данной техники, ваш файл стилей перестанет быть валидным, но я считаю это небольшой платой за кроссплатформенность.
- Войдите или зарегистрируйтесь, чтобы отправлять комментарии
Nikita
07.12.2007
Постоянная ссылка (Permalink)
Никогда не заморачивался и писал код так, чтобы он помещался в контейнер без переносов. Искусственный перенос - зло, так как трудно потом в нём разбираться, поскольку почти нигде в программировании нельзя разрывать строку.
Mike Khasaya
07.12.2007
Постоянная ссылка (Permalink)
Ну не всегда это зло, например, я при написании примеров к статьям стараюсь контроллировать код и вмещать его в контейнер. Но даже если где-то будет длинная строка и читатели просто скопируют копи-пастом мой код, он не будет содержать лишних переносов.
Dimox
07.12.2007
Постоянная ссылка (Permalink)
Мне кажется, удобнее для этой цели использовать overflow:auto, тогда у блока появятся горизонтальный и вертикальный скроллы, строки не будут разрываться, и код не вылезет за пределы контейнера.
Mike Khasaya
07.12.2007
Постоянная ссылка (Permalink)
Лично мне не нравятся мне скроллы, не удобно с ними, к тому же может появиться вертикальная прокрутка с overflow:auto; Как говорится на вкус и цвет товарищей нет и пусть каждый использует то, что удобно ему!
Kupuyc
10.12.2007
Постоянная ссылка (Permalink)
Спасибо за информацию. Не подскажите, где можно обозреть нестандартные штуки рода "-moz-*" и "-o-*"?
Mike Khasaya
10.12.2007
Постоянная ссылка (Permalink)
Для браузеров на движке 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
Вроде никого больше не забыл :-)
Васек
09.02.2008
Постоянная ссылка (Permalink)
Вы уж определитесь Вам scroll нужен или перенос длинных строк, это две совершенно противоположные вещи! Я например использую в своем блоге так же как на этом сайте сделано.
goxa
10.09.2009
Постоянная ссылка (Permalink)
По глупости своей начал впихивать тег <pre>, задумав облегчить тем самым редактирование контента (вместо <br />, просто начало сл. строки)). И ведь даже все br-подобные переносы во всей БД удалил, только тогда понял, что строчки начали выезжать за границы.
Огромное спасибо за статью, чуть было не стал вручную переделывать обратно.