diTii.com | D' Technology Weblog

Tero Karvinen displays “how to text wrap in CSS3, Mozilla, Opera and IE”. Here is what he says —”Code snippets and poems often use spaces for indenting text. Pre-tag is used to display preformatted text on webpages. This makes indenting visible, but has the annoying side-effect of disabling wrapping. When wrapping is disabled, long lines go out of the right side of window, which is never usefull. This howto explains how you can make preformatted text wrap on all browsers when making websites. We also learn how to make pre on any website wrap while browsing the web with mozilla.”

Contents of stylesheet pre-wrap.css:
[css]
/* Browser specific (not valid) styles to make preformatted text wrap */

pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* 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+ */
}[/css]

This web page includes the style sheet in head:
[html]

All the code snippets on this page, such as the style sheet above, are inside <pre> tags. See how it wraps by resizing your browser window. (If you make browser window very small, less than 20 characters wide, text goes outside the window any way.)

Wrap pre on any page with Mozilla userContent.css

Edit $HOME/.mozilla/default/*.slt/chrome/userContent.css in your favourite editor. The file does not exist by default, you have to create it. Add
[css]pre {
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
}[/css]

It is the same css as above with unrelated browsers removed and !important added. Important means that values in userContent are used instead those defined by stylesheets on websites. Close and open Mozilla. Try a page with pre but no css with its own. It should wrap, just like all pre-text in any website.

users.tkk | ajaxian