HTML whitespace handling rules
The "whitespace characters" in HTML include three types: space, tab, and line feed (CR/LF).
We know that by default, whitespace characters in HTML source code are displayed as spaces, and multiple consecutive whitespace characters will be treated as one, or in other words, multiple consecutive whitespace characters will be merged.
However, sometimes, we hope that multiple consecutive spaces in the HTML source code can be realistically rendered in the web browser, or we need the line breaks in the source code to function as real line breaks. So, we discovered the <pre> tag, which can truly restore the true situation of the whitespace characters in its internal text.
So we often put a piece of text representing computer code into the <pre> tag, and they will show their own space indentation and line wrapping effects in the browser, without the need for us to add additional styles and tags to control it. Indentation and line breaks.
As our understanding of CSS continues to deepen, we find that it turns out that all this is arranged by the white-space attribute. The reason why the <pre> element is so magical is that it has the default style {white-space: pre;}.
white-space property
The white-space attribute in CSS is used to set the processing rules for text whitespace characters, including: whether to merge whitespace characters, whether to retain line breaks, and whether to allow automatic line wrapping. The different behaviors of each attribute value are shown in the following table:
white-space attribute value list
| attribute value | whitespace | newline character | Automatic line wrapping | first appeared in |
|---|---|---|---|---|
normal | merge | neglect | allow | CSS 1 |
nowrap | merge | neglect | not allowed | CSS 1 |
pre | reserve | reserve | not allowed | CSS 1 |
pre-wrap | reserve | reserve | allow | CSS 2.1 |
pre-line | merge | reserve | allow | CSS 2.1 |
( Note : Under CSS1/2, the white-space attribute can only be applied to block-level elements; under CSS 2.1, it can be applied to all elements.)
If we need a container element to have whitespace processing behavior similar to the <pre> element, just set the {white-space: pre;} style for it.
Need for pre-wrap
Let's first explain the "automatic line wrapping" behavior in the above table. It refers to the text flow inside an element being typed in the text direction. When the text flow encounters a boundary that limits its continued extension, whether to wrap the line. "Word wrapping is not allowed" means that the text flow will overflow the element.
Therefore, the {white-space: pre;} style sometimes does not meet our expectations. For example, in some situations that do not require special strictness, or when formatting some code snippets that are not sensitive to line breaks (such as HTML or CSS), we do not want a long line of code in the code snippet to cause its container element to scroll horizontally. because it is difficult to read. We hope that in this case, long code will wrap automatically.
At this time, comparing the different behavioral characteristics of each attribute value in the above table, we will find that the pre-wrap attribute value stands out - it is exactly what we need.