How to handle spaces in CSS

1. Space rules

Whitespace within HTML code is usually ignored by browsers.

<p> hello world </p>

The above is a line of HTML code with two spaces at the beginning, inside, and end of the text.

The browser output is as follows: hello world

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

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

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

2. Space Character

HTML's rules for handling whitespace apply to many characters. In addition to the normal space bar, it also includes tab (t) and line feed (r and n).

The browser will automatically convert these symbols into ordinary space keys.

<p>hello
world</p>

In the above code, the text contains a line break, which the browser treats as a space. The output is as follows: hello world

Therefore, line breaks within text have no effect (unless the text is enclosed in <pre> tags).

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

The above code uses

Tags explicitly indicate line breaks

3. CSS white-space property

The space processing of HTML language is basically direct filtering. This is too crude a treatment, completely ignoring the fact that spaces within the original text may be meaningful.

CSS provides a white-space property that can provide a more precise way to handle spaces. This attribute has six values, except for the common inherit (inherit the parent element), the remaining five values ​​are introduced below.

3.1 white-space: normal

The default value of the white-space property is normal, which means that the browser handles whitespace 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 beginning of the text, and a long word and a line break inside.

Leading spaces are ignored. Because the container is too narrow, the first word overflows the container and then wraps at the next space. Newlines within the text are automatically converted to spaces.

3.2 white-space: nowrap

When the white-space property is nowrap, line breaks will not occur due to exceeding the container width.

p {
    white-space: nowrap;
}

All text appears on one line without wrapping.

3.3 white-space: pre

When the white-space attribute is pre, it is processed in the same way as the <pre> tag.

p {
    white-space: pre;
}

The above result is exactly the same as the original text, and all spaces and line breaks are preserved.

3.4 white-space: pre-wrap

When the white-space attribute is pre-wrap, it is basically processed in the same way as the <pre> tag. The only difference is that a line break occurs when it exceeds the container width.

p {
    white-space: pre-wrap;
}

The spaces at the beginning of the text, the spaces within the text, and the line breaks are all retained, and lines are broken where they exceed the container.

3.5 White-space: pre-line

When the white-space property is pre-line, it means retaining line breaks. Except that line breaks are output as is, everything else is consistent with the white-space:normal rule.

p {
    white-space: pre-line;
}

Except that line breaks within the text are not converted to spaces, everything else is the same as the normal processing rules. This is useful for poetry type texts.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.