Make pre tag text wrap in MediaWiki

I’m trying to get into this whole wiki thing…

I like to use the wiki equivalent of the <pre> tags to call out code or commands, which in MediaWiki language is completed by putting a single space at the beginning of a line. I found that long commands would not wrap by default, however (kind of like how they don’t on this blog…).

To make the long commands wrap, I modified the commonElements.css file in $wikihome/skins/common. Find the section:

pre, code, tt, kbd, samp, .mw-code {
        /*
         * Some browsers will render the monospace text too small, namely Firefox, Chrome and Safari.
         * Specifying any valid, second value will trigger correct behaviour without forcing a different font.
         */
        font-family: monospace, Courier;
}

and add

        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;

after the font-family line. Viola, the <pre> text will now wrap.

Note: when upgrading MediaWiki this file may be overwritten, so you may need to make this modification again.

4 thoughts on “Make pre tag text wrap in MediaWiki”

  1. Thanks for this! I added this to my Wiki’s custom CSS page so it’s never overwritten. E.g.:
    http://your-mediawiki.com/index.php?title=MediaWiki:Common.css

    I believe the CSS content from there loads *last*, but if it’s being overwritten elsewhere, try tacking on !important. E.g.:
    white-space: pre-wrap; !important
    white-space: -moz-pre-wrap; !important
    white-space: -pre-wrap; !important
    white-space: -o-pre-wrap; !important
    word-wrap: break-word; !important

Leave a Reply

Your email address will not be published.