Making preformated <pre> text wrap in CSS3, Mozilla, Opera and IE

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:

/* 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+ */
}

This web page includes the style sheet in head:

 <link rel="stylesheet" type="text/css" href="pre-wrap.css" />

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

pre {
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
}

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.

Links and bibliography

pmsyyz 2003-01-12 "I use this for IRC logs..." in Experts Exchange <pre> but not word wrap.

Akkana Peck: Customizing Mozilla.

Suignard (ed) / W3C: CSS3 Text Module - Candidate Recommendation 14 May 2003

Copyright, Notes, Todo

Todo: user stylesheet (!important) to make all pre in any page wrap in Mozilla. Test in Firefox.

Validate XHTML Basic 1.0