We all know that the <pre> tag can define preformatted text, and a common application is to represent computer source code. Text enclosed in a pre element usually retains whitespace and newlines, but unfortunately when you write code inside a <pre> tag, if you don't manually wrap the newlines, it will also be preserved for you instead of Line break.
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+ */ } |
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.
It only goes out of bounds if you shrink the window to less than 20 characters wide.