When the HTML pre element uses the CSS width and word-wrap: break-word properties, the long lines of code wrap in Chrome and IE6 but not in Firefox.

Here is a sample page that demonstrates this: http://susam.in/files/notes/css-hacks/pre-word-wrap/pre-word-wrap.html. The CSS code for the HTML pre element is as follows.

pre {
    border: 1px solid black;
    background: #ebebeb;
    width: 20em;
    overflow: auto;
    color: blue;
pre.wrap {
    word-wrap: break-word;

The first box in each output below use the wrap class. The second ones in each is a plain pre element.

Screenshot of output in Firefox 3.6
Output in Firefox 3.6
Screenshot of output in Chrome 11
Output in Chrome 11
Screenshot of output in Internet Explorer 6
Output in Internet Explorer 6

No comments

Post a comment