HTML <pre> tag values get horizontal scroll bars,how to format it?

This is my blog page. Sometimes I have to use C#,PHP and other code snippets in the blog. Therefore I use pre tags to make it looks nice and keep the formatting code as it is. pre tag width is 100% and it has a background colour. However, the text went away from it as in the above image and horizontal scroll bar going to appear. How can I overcome this? I don't want the bottom scroll bar.

Solution 1:

There are a few solutions:

The simplest is to place line breaks in the text. This probably is not what you want though, since it will either leave large right margins or still cause scroll bars, unless the browser window is just the right size.

Another is to use white-space:pre-wrap; in the CSS for your <pre> tag. This will cause the text to wrap to a new line as necessary, but still preserve all whitespace present in the source. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space for more information about this CSS property.

Alternatively, if you do not want any line breaks added (either manually or through automatic word wrap), you can use one of the following CSS properties for your <pre> tag:

• overflow-x:hidden; This will simply cut off the text that extends past the right edge. It will not be visible at all.
• overflow-x:scroll; This will cause scroll bars to appear within your webpage in case text extends past the right edge. This will prevent the entire page from getting so wide that scroll bars appear at the bottom. See http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow-x&preval=scroll for an example.
• overflow-x:auto; Like overflow-x:scroll; except the scrollbars only appear if required. (Thanks ccalvert in the comments)

Solution 2:

add style:

pre { 
    white-space: pre-wrap; 
    word-break: break-word;
}