What to do with whitespace in CSS (instance)

This article brings you to the content of the CSS with what to do with the space processing (example), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

First, the space rules

HTML code spaces are usually ignored by the browser.

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

Above is a line of HTML code, the front of the text, the interior and the back of each have two spaces. For ease of identification, a semicircle symbol is used here to ◡ denote spaces.

The results of the browser output are as follows.

Hello World

As you can see, both the front and back spaces of the text are ignored, and the inner contiguous spaces count as one. This is the basic rule that the browser handles whitespace.

You can use a label if you want the space to be output as is <pre> .

<pre>◡◡hello◡◡world◡◡</pre>

Alternatively, use an HTML entity instead to   represent a space.

<p>&nbsp;&nbsp;hello&nbsp;&nbsp;world&nbsp;&nbsp;</p>

Two, space characters

The rules for HTML processing spaces, which apply to multiple characters. In addition to the normal SPACEBAR, tabs ( \t ) and line breaks ( \r and) are included \n .

The browser automatically turns these symbols into the normal spacebar.

<p>helloworld</p>

In the above code, the text inside contains a newline character, the browser is considered as a space, the output is as follows.

Hello World

Therefore, wrapping inside the text is not valid (unless the text is placed <pre> inside the tag).

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

The above code uses <br> labels to explicitly represent line breaks.

Third, the White-space property of CSS

HTML language whitespace processing, basically is directly filtered. Such processing is too coarse, completely ignoring the original text inside the space may be meaningful.

CSS provides a white-space property that provides a more precise way to handle whitespace. There are six values in this property, except one common inherit (inherited parent Element), followed by the remaining five values.

3.1 White-space:normal

white-spaceThe default value of the property is normal , which means that the browser handles whitespace in a normal way.

<p>◡◡hellohellohello◡helloworld</p>

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

The container then <p> specifies a relatively small width. For easy identification, the background color is set to red.

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

Display effects such as.

As you can see, 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 at the back. A newline character inside the text automatically turns into a space.

3.2 White-space:nowrap

white-spaceproperty is nowrap not wrapped because it exceeds the width of the container.

p {  white-space:nowrap;}

Display effects such as.

All text is displayed as one line, not wrapped.

3.3 White-space:pre

white-spaceproperty is pre treated as a <pre> label.

p {  white-space:pre;}

Display effects such as.

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

3.4 White-space:pre-wrap

white-spaceWhen the property is in the same way as the label, the pre-wrap <pre> only difference is that a newline occurs when the container width is exceeded.

p {  white-space:pre-wrap;}

Display effects such as.

The space at the beginning of the text, the inner space, and the newline character are preserved, and the wrapping occurs where the container is outside.

3.5 White-space:pre-line

white-spaceWhen the property is pre-line , it means to keep the line break. The newline character is output as is, and the rest is consistent with the white-space:normal rule.

p {  white-space:pre-line;}

Display effects such as.

In addition to the line breaks inside the text are not turned into spaces, others are normal consistent with the processing rules. This is useful for text of poetic type.