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.
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
Recommend
CSS controls the spacing between words through the letter-spacing property
letter-spacing property : Increase or decrease th...
DD DT DL tag usage examples
We usually use the <ul><li> tags, but ...
Detailed explanation of the 10061 unknown error when using Navicat to connect to a remote Linux MySQL database
When using Navicat to connect to a remote Linux M...
Special effects of Bootstrap 3.0 study notes (display and hide, eliminate floating, close button, etc.)
The main contents of this article are as follows:...
Basic operations of MySQL data tables: table structure operations, field operation example analysis
This article uses examples to describe the basic ...
How to solve the problem of -bash: /usr/bin/yum: No such file or directory after typing yum in linux
After entering yum in linux, the prompt: -bash: /...
What to do if you forget your password in MySQL 5.7.17
1. Add skip-grant-tables to the my.ini file and r...
React High-Order Component HOC Usage Summary
One sentence to introduce HOC What is a higher-or...
Example of how to start a container with multiple network interfaces using docker
Adding a network interface to the container 1 Run...
Example of troubleshooting method to solve Nginx port conflict
Problem Description A Spring + Angular project wi...
Vant uploader implements the drag-and-drop function for uploading pictures (set as cover)
The effect diagram is as follows: <!DOCTYPE ht...
XHTML introductory tutorial: text formatting and special characters
<br />This section introduces how to impleme...
How to implement animation transition effect on the front end
Table of contents Introduction Traditional transi...
Learn more about using regular expressions in JavaScript
Table of contents 1. What is a regular expression...
Detailed graphic explanation of sqlmap injection
Table of contents 1. We found that this website m...