it is known
Tags define preformatted text, and a common application is to represent computer source code. Text enclosed in a PRe element usually retains spaces and line breaks, but unfortunately when you write code inside a tag, if you don't manually wrap it, it will preserve it for you without changing the line breaks.
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.
Since there are not many places where source code is used on this site, I didn’t really care about this problem before. Not long ago, an enthusiastic netizen reported this problem on QQ, so when I changed the theme this time, I looked for a solution and shared it. Of.
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+ */} From: Making preformated text wrap in CSS3, Mozilla, Opera and IE
This CSS solution can make the text in the pre tag automatically wrap. I tested it on all the browsers I have, and they all support IE6, IE7, IE8, Firefox, Opera, Safari and Chrome.
Only when you shrink the window to less than 20 characters in width will it go beyond the border. In addition, I saw some posts sharing this CSS technique, saying it can solve the problem of line wrapping of long words, but I tried it and it still didn't work.
-