The method of space processing in CSS

Time:2020-3-24

1. Space rule

Spaces in HTML code are usually ignored by browsers.


<p>  hello  world  </p>

Above is a line of HTML code with two spaces at the front, inside, and back of the text.

The output of the browser is as follows: Hello World

As you can see, the spaces at the front and back of the text are ignored, and the continuous spaces inside are only counted as one. This is the basic rule for browsers to handle spaces.

If you want spaces to be output as is, you can use the < pre > tag.

<pre>  hello  world  </pre>
Another way is to use HTML entities instead to represent spaces.
<p>  hello  world  </p>

2. Space character

HTML rules for handling spaces, applicable to multiple characters. In addition to the normal space bar, there are tabs (T) and line breaks (R and N).

The browser will automatically convert these symbols to normal space bar.


<p>hello
world</p>

In the above code, the text contains a newline character, which is regarded as a space by the browser. The output is as follows: Hello World

As a result, wrapping inside the text is not valid (unless the text is in the < pre > label).


<p>hello<br>world</p>

Use of the above code

Labels explicitly represent line breaks

3. CSS white space property

The space processing of HTML language is basically direct filtering. This kind of processing is too rough, completely ignoring the space inside the original text may be meaningful.

CSS provides a white space property, which can provide a more precise way to deal with space. There are six values for this attribute, with the exception of a generic inherit, the remaining five values are described in turn.

3.1 white-space: normal

The default value of the white space property is normal, indicating that the browser handles spaces in the normal way.


html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

In the above code, there are two spaces at the front of the text, with a long word and a line break inside.

The space at the beginning of the text is ignored. Because the container is too narrow, the first word overflows the container and then wraps in a space after it. Line breaks inside text are automatically converted to spaces.

3.2 white-space: nowrap

When the white-space property is nowrap, no wrapping occurs because the container width is exceeded.


p {
    white-space: nowrap;
}

All text is displayed as one line and does not wrap.

3.3 white-space: pre

When the white space attribute is pre, it is handled as a < pre > tag.


p {
    white-space: pre;
}

The above results are exactly the same as the original text, with all spaces and line breaks reserved.

3.4 white-space: pre-wrap

When the white space attribute is pre wrap, it is basically handled in the way of < pre > label. The only difference is that when the width of the container is exceeded, line wrapping will occur.


p {
    white-space: pre-wrap;
}

The space at the beginning of the article, the space inside and the line break are all reserved, and the line break occurs beyond the container.

3.5 white-space: pre-line

When the white space attribute is pre line, it means that line breaks are reserved. Except that line breaks will be output as is, they are consistent with the white space: normal rule.


p {
    white-space: pre-line;
}

Except that the line break inside the text is not converted to a space, all of them are consistent with the normal processing rules. This is useful for poetry type texts.

The above is the whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.