Implement white-space: Pre-wrap in IE6 and 7;

HTML blank character processing rules

In HTML, "Blank Space" includes space, tab, and line feed (CR/LF.

We know that by default, all blank characters in the HTML source code are displayed as spaces, and multiple consecutive blank characters are considered as one, or multiple consecutive blank characters are merged.

However, in some cases, we hope that multiple consecutive spaces in the HTML source code can be truly displayed in the web browser, or line breaks in the source code can be used for real line breaks. Therefore, we discovered the <PRE> label, which can actually restore the actual situation of the blank characters in its internal text.

Therefore, we often express a segment as a computer.CodeInto the <PRE> label, they will display their own space indentation and line feed effect in the browser, we don't need to add additional styles and labels to control the indentation and line feed.

With the deep understanding of CSS, we found that all this was originally scheduled by the white-space attribute. <PRE> the element is so magical because it has the default style {white-space: Pre.

White-space attributes

CSSInWhite-spaceThis attribute is used to set the processing rules for blank text characters, including: whether to combine blank characters, whether to retain line breaks, and whether to allow automatic line breaks. The behavior of each attribute value is shown in the following table:

White-space attribute values

Attribute Value	Blank Space Character	Line Break	Automatic line feed	First appeared in
Normal	Merge	Ignore	Allow	CSS 1
Nowrap	Merge	Ignore	Not Allowed	CSS 1
Pre	Retained	Retained	Not Allowed	CSS 1
Pre-wrap	Retained	Retained	Allow	CSS 2.1
Pre-line	Merge	Retained	Allow	CSS 2.1

(Note: In css1/2, the white-space attribute can only be applied to block-level elements; In css 2.1, it can be applied to all elements .)

If we want a container element to have a blank character like the <PRE> element to process the behavior, set the {white-space: Pre;} style for it.

Requirements for pre-wrap

Let's first explain the "Automatic line feed" behavior in the above table, which refers to the text stream in an element according to the text direction. When a text stream encounters a boundary that limits its continued extension, whether to wrap. "Automatic line feed not allowed" means that the text stream will overflow this element.

Therefore, the {white-space: Pre;} style sometimes does not meet our expectations. For example, in some scenarios where no particular rigor is required, or when composing code snippets (such as HTML or CSS) that are not sensitive to line breaks, we do not want a long line of code in the code snippet to generate a horizontal scroll bar for its container elements, because it is inconvenient to read. In this case, we hope that long code will automatically wrap.

In this case, we will find that the pre-wrap attribute value stands out, which is exactly what we need.

 

 

Another requirement for pre-wrap

Let's look at another situation that may happen in practice.

The text field (<textarea> element) in a form can accept text data that contains line breaks. This is one of the important features of a text field (<input> element of the text type, therefore, we usually call it "multi-line text box ".

One problem that arises is that we submit multiple lines of text data through multi-line text boxes to display multiple lines of text on the web page. HoweverSource codeBy default, blank characters are merged. To ensure that the submitted multi-line text data is correctly displayed on the webpage, it is usually processed on the server, for example, you can convert a line break in text to a line break label in HTML <br> and then write it to the database. Alternatively, you can perform similar conversion operations when reading text data from the database.

In this way, when the server outputs the text data to the webpage, the original carriage return status can be reproduced.

However, due to design mistakes (or intentional System Restrictions), the server may not do this. As a result, the linefeed in the text information cannot display the line feed effect, instead of a small space.

(Two different methods for the cnbeta website to handle the comment text: the left side is a normal comment. The system does not perform line feed conversion to limit the height of each comment and prevent malicious screen refreshing; the right side is a hot comment, which is processed by the system .)

If the server does not perform line feed conversion due to negligence, can the front-end be remedied at the minimum cost? In this case, pre-wrap can play a role-without any additional processing, you can directly set the {white-space: Pre-wrap;} style for the text container element, to restore the true state of multi-line text.

IE6 and IE7 for cups

Let's take a look at the above table. We found that pre-wrap is the attribute value introduced only from CSS 2.1. However, the most widely used IE6 and IE7 browsers are based on css1 and some css2. They cannot recognize pre-wrap at all, and of course they cannot implement blank character processing of pre-wrap.

After frantically greeting Microsoft, ie and other related people, Web developers still have to face this problem-how to implement the Effect of Pre-wrap in IE6 and 7?

 

Implement pre-wrap in IE6 and 7

We often perform repeated tests and find a method to implement the pre-wrap effect in IE6 and 7.

For example, the following HTML structure is available:

<Div class = "content"> This is a multi-line text data. Some lines of text are very long, leading to container overflow. For example, there is a line break between the line and the line you see, but HTML line breaks are not used. tag </div>
We need to set the. Content element to the pre-wrap style. Ideally, you only need to write the following CSS code. ,

Reference content is as follows: . Content { White-space: Pre-wrap; }

To cope with IE6 and 7, we need to modify the above CSS Code as follows:

Reference content is as follows: . Content { White-space: Pre-wrap; * White-space: Pre; * Word-wrap: Break-word; }

In this way, we can test each browser and find that the desired effect is perfect.

Of course, you may have noticed that we use a little CSS hack. Don't worry. They are clear and easy to maintain. I think this is acceptable. In the face of low-energy browsers, we can only give them some extra care.

Principle

If you are a pragmenterArticleIt is over now. You can save the code and leave, or continue to browse other articles about CSS magic. If you are a curious CSS learner, I would like to analyze its implementation principles with you.

In the final CSS code above, it is clear that for standard browsers, we use the normal {white-space: Pre-wrap;} to achieve the desired effect. For IE6 and 7, we use CSS hack to accept additional style declarations and use other methods to achieve effects similar to pre-wrap.

First, in IE6, 7, the style declaration {white-space: Pre-wrap;} is discarded because it cannot be identified. content also sets the {white-space: Pre;} style. We are already familiar with PRE, and its features are only different from the pre-wrap effect we want, that is, pre does not allow automatic line breaks, that is, A long text line may overflow its container element.

Therefore, to make these long lines of text wrap automatically. content element settings {word-wrap: Break-word;} style (for the sake of caution, we use CSS hack to isolate this statement to IE6, 7; but even if it is exposed to all browsers, it is also harmless ). This statement restricts text lines in the. Content element and forces them to wrap. That is to say, {white-space: Pre;} has completed the task of recognizing text line breaks, and the remaining tasks of automatic line breaks are completed by {word-wrap: Break-word.

Insert word-wrap documents

Since its development, CSS has gone through multiple versions, but its control over Text Formatting is still not accurate and flexible. As a result, Microsoft's IE browser has developed some private attributes that extend the CSS text typographical functions. Especially, most of these extended attributes take into account the typographical rules of non-Latin languages. Since these private extension attributes are indeed very valuable, they are organized and included in the css3 draft.
The word-wrap attribute is a representative example. It determines whether to disconnect a text line when it exceeds the container's boundary. Currently, this attribute has been supported by most mainstream browsers.
Back to the previous principle analysis, we will actually find a conflict. {white-space: Pre;} is very reluctant to wrap, and {word-wrap: Break-word ;} the internal text must be automatically wrapped. In the face of such conflicts, how does the browser decide?

In CSS, there are many attributes that control the Text wrap mode. In case of a conflict, some attributes have a higher priority in text layout, so they will win in the conflict, determines the final text style. Obviously, in the above conflict, {word-wrap: Break-word;} is more powerful, and finally the lines of the plain text are well-behaved.

Conclusion

Thank you for reading this article. I hope this article will help you!