The white-space of CSS learning every day

White-space is a property of CSS that specifies that text is not wrapped.

The white-space has several values:

1, Normal: This value is the default value, the space before and after the paragraph will be ignored by the browser. As shown below:

<div style="width:200px;height:200px;white-space:normal; "> is an     action!    </div>

We put a lot of blanks in front of this and a lot of whitespace behind the action. But the results are as follows:

2, Pre: The space before and after the paragraph will be reserved by the browser, the text will not be wrapped. As shown below:

3. NoWrap: Text will not wrap until <br> tag is encountered. As shown below:

First show the results of normal:

<div style="width:10px;height:80px;white-space:normal; "> is an     action!    </div>

Results:

If you change to nowrap, then:

<div style="width:10px;height:80px;white-space:nowrap; "> is an     action!    </div>

Results:

4, Pre-wrap: Left and right blank characters, but will be normal line. Such as:

<div style="width:10px;height:80px;white-space:pre-wrap; ">    thisisan action!    </div>

Results:

Did you see it? If there are spaces between the paragraphs, the spaces are also wrapped.

5. Pre-line: Merges blank sequence characters, but preserves newline characters. What do you mean? See the results of the pre-wrap above? Now let's take a look at the results of Pre-line:

<div style="width:10px; height:80px;white-space:pre-line; "> is an     action!    </div>

Results:

<div style="width:200px; height:80px;white-space:pre-line; "> is an     action!    </div>

Results:

Pre-line that is, remove the whitespace before and after the paragraph, and remove the whitespace if there is a separate line at the time of the line break.

6. Inherit: Inherit the White-space property value from the parent element.

The white-space of CSS learning every day