<PRE> label

<PRE> the most basic understanding of tags is pre-formatted text. text enclosed in the PRE element usually contains spaces and line breaks. The text is also displayed as an equal-width font. It is often used to display computer source code on webpages. 1. Example of formatting text

<pre>.post_code{ padding:10px; border:dotted 1px #0000ff; width:650px; height:auto; overflow:scroll;}</pre><div>.post_code{ padding:10px; border:dotted 1px #0000ff; width:650px; height:auto; overflow:scroll;}</div>

Display result:

2. Differences between <PRE> and <code>

Code Tag:

1. Code Label definition: <code> label, used to indicate the text content that can be read by computer source code or other machines. The software code writer is used to the code format when writing the code. The <code> label is designed for software code writers, the text in the code label is displayed in an equal-width, similar font (courier) similar to a telex style.

2. The Code tag application should only be used to indicate the source code of a computer program or text that can be read by other machines. <Code> the tag function converts text into an equal-width font, and implies that the text is the source code. Then, based on the second function, the browser may add results based on its actual situation in the future. For example, a programmer's browser may search for <code> segments and execute some additional Text Formatting operations, such as special indentation of loops and conditional judgment statements.

3. Code tag example. Let's take a look at the differences in the format between text snippets without code tags and text snippets with code tags. It must be noted that the first function of the Code tag is demonstrated here. As for the function of the source program in the Code section of the browser, it must be displayed in a specific browser.

4. Relationship between the Code tag and the PRE Tag. Through definition, we can know the relationship between the Code tag and the PRE Tag. the similarities between the two are similar in applications, and they are mainly applied to displaying the source code in the computer in the browser. However, there is a big difference between the two. One function of the Code tag implies that the text surrounded by the browser code tag is the computer source code, and the browser can make its own style processing, the Pre label does not have this function, but the pre label can retain spaces and line breaks in the text. The spaces and line breaks in the text are the necessary styles for computer source code display. In this case, we can imagine whether the code tag and the PRE Tag can be used together? The answer is yes. code labels and pre labels can be nested, but you must pay attention to the nesting order of the two.

Http://www.cnblogs.com/lizonghui/archive/2012/09/18/2692355.html

3. The text in the <PRE> label is wrapped with line breaks. Text in the PRE element usually contains spaces and line breaks, but unfortunately, when you write code in the <PRE> label, if you do not manually wrap it, it will also be reserved for you without changing the line feed.

We all know that the <PRE> label can define pre-formatted text. A common application is to represent the source code of a computer. Text enclosed in the PRE element usually contains spaces and line breaks, but unfortunately, when you write code in the <PRE> label, if you do not manually wrap it, it will also be retained for you without changing the line feed.

At this time, you can use overflow: auto; (when the Code exceeds the container boundary, the scroll box is displayed), but this method is not applicable to all mainstream browsers, some browsers directly intercept excess content.

Since there were not many places where the source code was used on this site, I was not very concerned about this issue. Some enthusiastic netizens recently reported this issue on QQ. So when I switched the topic this time, I found a solution and shared it.

pre{　　white-space:pre-wrap;/*css-3*/　　white-space:-moz-pre-wrap;/*Mozilla,since1999*/　　white-space:-pre-wrap;/*Opera4-6*/　　white-space:-o-pre-wrap;/*Opera7*/　　word-wrap:break-word;/*InternetExplorer5.5+*/}

This CSS solution enables Automatic Text wrapping in the PRE label. I tested it in some browsers, all supported, IE6, IE7, IE8, Firefox, opera, Safari, and chrome.

The window is exceeded only when you narrow down the window to a width less than 20 characters.

<PRE> label