Automatic line breaks in html pre tags

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.

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.

pre wrap 解決<pre>標簽里的文本換行(兼容IE, FF和Opera等)

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.

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 allows the text in the pre tag to wrap automatically. I have tested it on all the browsers I have, and all of them support it, including IE6, IE7, IE8, Firefox, Opera, Safari and Chrome.
The border will only go out of bounds when you shrink the window to a width of less than 20 characters. In addition, I saw some posts sharing this CSS technique, saying that it can solve the problem of long word wrapping, but I tried it and it didn't work.

<<: Tutorial on using Webpack in JavaScript

>>: Achieve 3D flip effect with pure CSS3 in a few simple steps