CSS

The <pre> tag element is often used when displaying code blocks because it preserves indentation and line breaks.
Text identified by a <pre> tag is rendered with all spaces and line breaks intact.
By default, <pre> does not support wrapping, so when you render a ‘large’ line, it will force your browser to show a horizontal scroll bar.
By using that scroll bar you will be able to to read the whole line part by part.
Having this feature enabled, the process of reading that line will not be as convenient as it would be after the line would wrap to the following lines like a book. It make sense as you will never be able to see the whole line in one screen.

To mitigate the problem we used the following css snippet, which will instruct most browsers to wrap the contents of all <pre> tags.

pre {
 overflow-x: auto;
 white-space: pre-wrap;
 white-space: -moz-pre-wrap !important;
 white-space: -pre-wrap;
 white-space: -o-pre-wrap;
 word-wrap: break-word;
}