How do I wrap text in a pre tag?

Ensuring cross-browser compatibility

While the pre-wrap space-saving magic works for most modernized browsers, some time travelers (read: older browsers) may require a little coaxing.

• Mozilla: The -moz-pre-wrap; fix is crucial for archaeological Mozilla browsers.
• Opera: Versions 4-6 fancy -pre-wrap;, whereas versions 7 and onwards prefer -o-pre-wrap;.
• Internet Explorer: In the world of IE 5.5+, use word-wrap: break-word; for a pleasant wrapping experience.

To keep all bases covered, you could apply:

/* Because compatibility issues are scarier than Ghostface */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  -moz-pre-wrap: pre-wrap;
  -o-pre-wrap: pre-wrap;
}


Avoiding awkward mid-word line breaks

When enforcing text wrapping within <pre>, we may need to ensure breakpoints do not interrupt the flow of words:

• The word-break: keep-all; style prevents line breaks from bisecting words in an unseemly manner.

Here's how to implement it:

/* Because no word wants to hibernate in the middle of the line */
pre {
  white-space: pre-wrap;
  word-break: keep-all;
}


Swapping pre for div - another useful trick

Switching out the <pre> tag for a <div> can help stave off horizontal scrolling on your page:

• Replace your <pre> with a <div> but retain the whitespace formatting:

<!-- The pre-tag impostor -->
<div style="white-space: pre-wrap; font-family: monospace;">
  Preformatted text but without the scroll bars...
</div>


This maintains whitespace formatting while offering better layout control.

Defining a custom class for more control

If your page has varied <pre> tags each requiring distinct styles, using a custom CSS class can target specific adjustments:

/* A bit of customization because everyone likes to feel special */
.prettyprint-override {
   white-space: pre-wrap;
   word-wrap: break-word;
   word-break: keep-all;
}


Apply this class directly to your <pre> tags:

<!-- When one size doesn't fit all  -->
<pre class="prettyprint-override">Your text...</pre>


Balancing wrapping and readability

Pairing white-space: pre-wrap; with word-break: keep-all; can make your text within <pre> look clean and readable:

• word-wrap: break-word; ensures breaks occur at whitespace instead of chopping words into pieces.
• white-space: pre-wrap; enables text to naturally wrap as the container resizes.

In CSS:

/* For beautiful, readable pre-formatted text */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: keep-all;
}
