Spaces and Blank lines in HTML code

All contiguous spaces or blank lines (line breaks) in the HTML code are displayed as a single space.

Example 1: (contiguous spaces in text content )

Code

< P > In this text, enter a continuous space of          about 10. </ P >

Display effect: A space between"grid" and "Big" is displayed as a space.

In this text, the input of a continuous space is about 10 input.

Example 2: (contiguous spaces between the codes)

Code

< span >span is an inline label </span>               <span> And the preceding span elements are separated by a number of spaces </span>

Display effect: A contiguous space between two span elements, showing the space between "sign" and "and", with only one space.

Span is a large number of spaces between an inline label and the preceding SPAN element

The above two examples show that consecutive spaces in the HTML code are displayed as a space, and the remaining extra spaces are removed or ignored.

The paragraph text is actually part of the HTML code, except that it is inside the p tag, and the space in Example 2 is between two span tags.

Understand the space, now look at the empty line, the same

Example 3: (blank line in text content)

Code

< P > in this text, the input continuous blank line probably entered five lines.  </p>

Display effect: As we can see, the lines in the text code are empty, and the display is just a space.

In this text, the input continuous blank line probably entered five lines.

Example 4: (empty line between elements/tags), as long as the space in Example 2 is replaced by a blank line, the display effect and example 2, the multiline blank line will only appear as a space.

< span >span is an inline label </span><span> A lot of empty lines are separated from the previous span elements </span>

Span is a lot of empty lines between an inline label and the preceding SPAN element

Proof: All contiguous spaces or blank lines (line breaks) in the HTML code are displayed as a single space.

In that case, what if we want to widen the spacing between two characters so that successive spaces or blank lines in the code are displayed with contiguous spaces or blank lines? It's actually very simple.

method One: We can use the Pre-formatted label <PRE>, whether it is a space or a blank line is applicable.

< Pre > This is a pre-formatted text. It retains the      space and line breaks.  </pre>

Show effect

This is a pre-formatted text. It retains the      space and line breaks.

Method Two: we can use the space entity &nbsp; instead of space, with a newline label <br/> instead of a blank line. Although this method can get the result we want to display, but not the most friendly way for search engine, because &nbsp; and <br/> in HTML is no semantics. So it is recommended to use as little as possible. It's also important to note that,&nbsp; Must be lowercase, and the most trailing semicolon cannot be omitted.

Method Three:(suitable for spaces) use full-width spaces

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

Question: How do I use the full-width ime?

Sogou Input method as an example, we usually use a half-width input, its status bar has a sign of the moon, it is used is the half-width input, if it is the sun's flag, it means that the use of full-width input. The full-width/half-width toggle can be toggled by clicking on the flag or by shift+space the shortcut key (whitespace).

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

method Four: the Word-spacing property in CSS can change the standard interval between words (words) by using the Word Interval property control in CSS styles. We know that two words in English are separated by a space, so we can visually think that word-spacing changes the width of the space between the words (elongated or shortened).

method Five: use the White-space property in the CSS style, which declares how to handle whitespace inside an element.

value	Description
Normal	Default. The blank will be ignored by the browser.
Or:	The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.
NoWrap	The text does not wrap, and the text continues on the same line until the <br> tag is encountered.
Pre-wrap	Preserves the sequence of whitespace characters, but wraps them normally.
Pre-line	Merges a sequence of whitespace characters, but preserves newline characters.

White-space:normal; normal, and not set, both consecutive spaces and blank lines display only a single space.

White-space:nowrap: What does it mean to not break the line? Normally, when our text is outside the text field, the text will be automatically broken, this setting is to say that does not automatically break the line, but instead of touching the line label <br/>

White-space:pre; Same as method one, the text is displayed as-is output. When the text is outside the text field, the line is not wrapped and a scroll bar is created.

White-space:pre-wrap; preserves spaces and blank lines, but wraps text when they are outside the text field.

White-space:pre-line; consecutive spaces are displayed as a single space, but a contiguous blank line is preserved.

Spaces and Blank lines in HTML code