How to handle spaces in CSS (example)

The content of this article is about how to process spaces in CSS (examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Space rules

Spaces in HTML code are usually ignored by browsers.

<p>◡◡hello◡◡world◡◡</p>

The above is a line of HTML code, with two spaces each in the front, inside and back of the text. For ease of identification, the semicircular symbol ◡ is used here to represent spaces.

The browser output is as follows.

hello world

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

If you want the spaces to be output as they are, you can use the <pre class="brush:php;toolbar:false"></pre> tag.

<pre class="brush:php;toolbar:false">◡◡hello◡◡world◡◡

An alternative is to use HTML entities   to represent spaces instead.

<p>  hello  world  </p>

2. Space characters

HTML’s rules for processing spaces apply to a variety of characters. In addition to the normal space bar, it also includes tab characters (\t) and newline characters (\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 newline character, which is regarded as a space by the browser, and the output result is as follows.

hello world

So, line breaks within the text are invalid (unless the text is placed within the <pre class="brush:php;toolbar:false"></pre> tag).

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

The above code uses the <br> tag to explicitly indicate line breaks.

3. The white-space attribute of CSS

The space processing in HTML language is basically direct filtering. Such processing is too crude and completely ignores the fact that the whitespace inside the original text may be meaningful.

CSS provides a white-space attribute, which can provide a more precise way to handle spaces. This attribute has six values ​​in total. In addition to a common inherit (inheriting the parent element), the remaining five values ​​are introduced below.

3.1 white-space: normal

The default value of the white-space attribute is normal, indicating that the browser handles spaces in a normal manner.

<p>◡◡hellohellohello◡hello
world
</p>

In the above code, there are two spaces in front of the text, a long word and a newline character inside.

Then, the container <p></p>specifies a relatively small width. For easier identification, the background color is set to red.

p {
  width: 100px;
  background: red;
}

The display effect is as shown below.

As you can see, the spaces at the beginning of the text are ignored. Because the container is too narrow, the first word overflows the container and wraps one space after it. Line breaks within the text are automatically converted to spaces.

3.2 white-space: nowrap

white-spaceWhen the attribute is nowrap, line breaks will not occur due to exceeding the width of the container.

p {
  white-space: nowrap;
}

The display effect is as shown below.

All text is displayed as one line without line breaks.

3.3 white-space: pre

white-spaceWhen the attribute is pre, follow <pre class="brush:php;toolbar:false"></pre> Label processing.

p {
  white-space: pre;
}

The display effect is as shown below.

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

3.4 white-space: pre-wrap

white-spaceWhen the attribute is pre-wrap, basically follow the tag is processed in the same way. The only difference is that when the width of the container is exceeded, a line break will occur.

p {
  white-space: pre-wrap;
}

The display effect is as shown below.

The spaces at the beginning of the text, internal spaces and newlines are all retained, and line breaks occur beyond the container.

3.5 white-space: pre-line

white-spaceWhen the attribute is pre-line, it means to retain the newline character. Except for the newline character, which will be output as it is, everything else is consistent with the white-space:normal rules.

p {
  white-space: pre-line;
}

The display effect is as shown below.

Except that the line breaks inside the text are not converted into spaces, the others are consistent with the processing rules of normal. This is useful for poetry type texts.

Recommended related articles:

div tag: implementation of horizontal centering and vertical centering (with code)

Code for string conversion using the text-transform attribute in CSS

The above is the detailed content of How to handle spaces in CSS (example). For more information, please follow other related articles on the PHP Chinese website!