Automatic line breaks in html pre tags

We all know that the <pre> tag can define preformatted text. A common application is to represent computer source code. Text enclosed in the pre element usually retains spaces and line breaks, but unfortunately, when you write code inside the <pre> tag, if you don't wrap it manually, it will also be preserved for you and will not automatically wrap.

At this time, you can use overflow:auto; (when the code exceeds the container boundary, display the scroll box), but this method does not work for all mainstream browsers. Some browsers will directly cut off the excess content.

Since there are not many places in this website that use source code, and I didn’t pay much attention to this issue 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.