whitespace display of HTML

One, use full-width space

Full-width spaces are interpreted as Chinese characters, so they are not interpreted as HTML separators and can be displayed according to the actual number of spaces.

Second, the use of space substitution symbol

Substitution symbols are places where spaces need to be displayed, and these symbols are interpreted by the browser as spaces.

There are several alternative symbols for spaces:

name	numbering	Descriptive narrative
 	& #160;	Continuous white space (1 character width)
 	& #8194;	Half Blank (1 character width)
 	& #8195;	A blank (2 character width)
 	& #8201;	Narrow white space (less than 1 characters wide)

can use the name or number as a space substitution symbol, the name must be lowercase, the end of the ";" cannot be omitted.

Such as:

Huan    Ying    light    Pro!

The display effect is: Welcome!

Third, using the CSS White-space property

The White-space property of the CSS is used to set the processing of the text hollow lattice, and when the White-space property is taken to the pre, the browser retains the space and line breaks in the text so that you can use spaces and carriage returns directly in the text.

This method is especially useful for displaying program code in a Web page. For example: Displays a section of C program code.

<div style= "White-space:pre">int Sub (int x,int y) {int z;    if (x&gt;y) z = x-y;    else z = y-x; return z;} </div>

The display effect is:

int sub (int x,int y) {int z;    if (x>y) z = x-y;    else z = y-x; return z;}

Using HTML <pre> tags can achieve similar results, but the <pre> tag has some less-than-good features that are less convenient than using CSS's White-space properties.

Iv. using CSS's Letter-spacing property

The Letter-spacing property of the CSS is used to set the interval between characters in the text, and its value can be a length value with a unit, and the browser sets a specified length of space between the word and the word. Example:

<div style= "letter-spacing:30px"> Welcome!" </div>

The display effect is:

Welcome!

Note that if there are English words in the text, the blanks are added between the letters, not between the words.

V. Using CSS's Word-spacing property

The Word-spacing property of the CSS is used to set the interval between words in the text, and its value can be a length value with a unit, and the browser sets a specified length of space between the word and the word. Example:

<div style= "word-spacing:30px">happy New year!</div>

The display effect is:

Happy New year!

Note that HTML distinguishes words by spaces, and it displays whitespace between words at a specified length.

Vi. using CSS's Text-indent property

The Text-indent property of the CSS is used to set the first line indent, and its value can be a length value with a unit, and the browser sets the blank at the beginning of the paragraph at the specified length. Example:

<div style= "Text-indent:2em"> Welcome!" </div>

The display effect is:

Welcome to visit!

Description: EM is a relative length unit, and 2EM represents the distance to indent two characters.

whitespace display of HTML