Automatically wrap content in html pre tag_HTML/Xhtml_Web page production

At this time, you can use overflow:auto; (when the code exceeds the boundary of the container, the scroll box is displayed), but this method is not suitable for all mainstream browsers, and some browsers will directly truncate the exceeded content.

We all know that the

 tag  can define pre-formatted text. A common application is to represent computer source code. Text enclosed in a pre element usually retains spaces and newlines, but unfortunately when you write code inside a 
 tag, if you don't manually wrap it, it will also retain it for you instead of Will automatically wrap. 

At this time, you can use overflow:auto; (when the code exceeds the boundary of the container, the scroll box is displayed), but this method is not applicable to all mainstream browsers, and some browsers will Truncate excess content directly. 
标签里的文本换行(兼容IE, FF和Opera等)" src="http://files.jb51.net/do/uploads/allimg/090606/0242050.png"  style="max-width:90%">
Since there are not many places where source code is used on this site, I didn’t pay much attention to this problem before. Not long ago, an enthusiastic netizen reported this problem on QQ, so I took advantage of this time to change the theme and looked for a solution. Plan, share it. 



Copy code
The code is as follows:
 
pre { 
white-space: pre-wrap; /* css-3 */ 
white-space: -moz-pre-wrap; /* 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 */ 
} 



This CSS solution can make the text in the pre tag automatically wrap. I tested it on all the browsers I have, and they are all supported, including IE6, IE7, IE8, Firefox, Opera, Safari and Chrome. 
Only when you reduce the window to a width less than 20 characters, it will exceed the boundary 
 In addition, I saw some posts also sharing this CSS technique, saying that it can solve the problem of line wrapping of long words, but I tried After a while, it still didn't work.