A brief discussion on spaces and blank lines in HTML code

All consecutive spaces or blank lines (newlines) in HTML code are displayed as a single space.

Example 1: (Continuous spaces in text content)

Code

Example 2: (continuous spaces between codes)

Code

The above two examples prove that consecutive spaces in HTML code will be displayed as one space when displayed, and the remaining redundant spaces will be removed or ignored.

Paragraph text is actually part of the HTML code, but it is inside the p tag, while the space in Example 2 is between the two span tags.

Now that we understand spaces, let's look at blank lines.

Example 3: (blank line in text content)

Code

Proof: All consecutive spaces or blank lines (newlines) in HTML code will be displayed as one space.

In this case, what should we do if we want to increase the spacing between two characters so that consecutive spaces or blank lines in the code are also displayed as consecutive spaces or blank lines? It’s actually very simple.

Method 1: We can use the pre-formatting tag <pre>, which is applicable to both spaces and blank lines.

Method 2: We can use the space entity character &nbsp; to replace spaces, and use the line break tag <br/> to replace blank lines. Although this method can achieve the display effect we want, it is not the most search engine friendly way because &nbsp; and <br/> have no semantics in HTML. So it is recommended to use it as little as possible. Also note that &nbsp; must be lowercase and the final semicolon cannot be omitted.

Method 3: (Fit spaces) Use full-width spaces

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

Question: How to use full-width input method?

Taking Sogou Input Method as an example, we usually use half-width input. If there is a moon icon in the status bar, it means that half-width input is being used. If it is a sun icon, it means that full-width input is being used. You can switch between full-width and half-width by clicking the icon or using the shortcut key Shift+Space (space character).

Half-width input (moon) Full-width input (sun)

Method 4: Use the word-spacing property in CSS style to control the word-spacing property in CSS. The word-spacing property in CSS can change the standard spacing between characters (words). We know that two words in English are separated by spaces, so we can visually think of it this way: word-spacing changes (lengthens or shortens) the width of the space between words.

Method 5: Use the white-space property in the CSS style. This property declares how to handle whitespace within an element.

white-space:normal; is normal, just like not setting it, consecutive spaces and blank lines will only display one space.

white-space:nowrap; What does it mean to not wrap? Normally, when our text exceeds the text area, the text will automatically wrap. This setting means that it will not automatically wrap, but will only wrap when it encounters a line break tag<br />

white-space:pre; Same as method 1, the text is output and displayed as is. When the text exceeds the text area, no line break occurs and a scroll bar is generated.

white-space:pre-wrap; retains spaces and blank lines, but automatically wraps when text exceeds the text area.

white-space:pre-line; Consecutive spaces will be displayed as one space, but consecutive blank lines will be preserved.

The above is all the content of the editor's brief discussion on spaces and blank lines in HTML code. I hope everyone will support 123WORDPRESS.COM~

Original URL: http://www.cnblogs.com/web-HCJ/p/4543093.html