Text implementation wrapping in pre label

Text that is surrounded in the pre element usually retains spaces and line breaks, but unfortunately, when you write code in the <pre> tag, if you do not manually wrap it, it will also hold it for you without Ming the line.

We all know that <pre> tags can define preformatted text, and a common application is to represent the source code of a computer. Text that is surrounded in the pre element usually retains spaces and line breaks, but unfortunately, when you write code in the <pre> tag, if you do not manually wrap it, it will also hold it for you without Ming the line.
At this point, you can use Overflow:auto (Display the scroll box when the code is outside the container boundary), but this method does not apply to all major browsers, and some browsers will directly truncate the excess content.

Because the site uses the source code is not a lot of places, before also not very concerned about this problem, not long ago there is an enthusiastic netizen in the QQ feedback on this issue, so in taking advantage of this change theme, looking for a solution to share.
pre{
white-space:pre-wrap;/*css-3*/
white-space:-moz-pre-wrap;/*mozilla,since1999*/
white-space:-pre-wrap;/*opera4-6*/
white-space:-o-pre-wrap;/*opera7*/
word-wrap:break-word;/*internetexplorer5.5+*/
}

The CSS scheme allows text to be wrapped in the pre label, and I tested it on all my browsers, all supported, Ie6,ie7,ie8,firefox,opera,safari and Chrome.

Only when you narrow the window to a width of less than 20 characters will the boundary be exceeded.