Wrap text inside html pre tag

Long text lines inside HTML pre tag <pre></pre> may break your site layout and create the unwanted horizontal scroll bar.

Using break line to format the code may affect the execution of the code which is often copy/pasted.

The solution is to use CSS formatting to wrap the long lines of text.

pre {
    overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* 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+ */
}

Credits: http://www.longren.org/2006/09/27/wrapping-text-inside-pre-tags/