Example 1: (Consecutive Spaces in Text Content)
Display effect: a space between "cell" and "large" shows that it is just a space.
Example 2: (Consecutive spaces between codes)
Display effect: a continuous space between two span elements, which is displayed as a space between "check" and "and", with only one space.
The above two examples prove that consecutive spaces in HTML code will be displayed as a space when displayed, and the remaining extra spaces will be removed or ignored.
The paragraph text is actually part of the HTML code, but it's inside the p tag, and the space in Example 2 is between the two span tags.
Understanding the spaces, now look at the blank lines, the same reason
Example 3: (Blank line in text content)
Display effect: As we can see, the five blank lines in the text code are only displayed as a space.
Example 4: (Blank line between elements/tags), just replace the space in Example 2 with a blank line, the display effect is the same as in Example 2, and multiple blank lines will only appear as a space.
Validation: All consecutive spaces or blank lines (line breaks) in html code are displayed as a single space.
That being the case, what if we want to expand the spacing between two characters so that consecutive spaces or blank lines in the code also show consecutive spaces or blank lines? It's actually quite simple.
Method one: We can < pre> with preformatted tags, whether it is a space or a blank line.
Display the effect
Method two: We can replace the space with a space entity and replace the blank line with a newline label <br/>. While this approach gives us the look we want, it's not the most search engine-friendly way to do it, because <br/> have no semantics in HTML. Therefore, it is recommended to use as little as possible. It is also important to note that it must be lowercase, and the last 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 according to the actual number of spaces.
Question: How do I use the full-width input method?
Taking the Sogou input method as an example, we usually use half-width input, and there is a moon flag in its status bar, which indicates that it is using half-width input, and if it is a sun symbol, it means that the full-width input is used. The full/half-width toggle can be toggled by clicking on the flag or by the shortcut key Shift+Space.
Half-width input (moon)
Full-width input (sun)
Method 4: Using css style word spacing property control, the word-spacing property in CSS can change the standard spacing between words (words). We know that two words in English are separated by spaces, so we can visually think that word-spacing changes (elongates or shortens) the width of that space between words.
Method Five: Use the CSS-style white-space attribute, which declares how to handle whitespace within the element.
<col style="width: 93px;">
<col>
value
description
normal
default. Blanks are ignored by the browser.
pre
Blanks are left in the browser. It behaves like the <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
The blank sequence is preserved, but the line breaks occur normally.
pre-line
Merges the blank character sequence, but preserves the line breaks.
white-space:normal; It is normal, and as with no setting, successive spaces and blank lines will only show one space.
white-space:nowrap; What does it mean not to wrap? Under normal circumstances, when our text exceeds the text field, the text will automatically fold, which means that it does not automatically fold lines, but encounters a newline label<br /> before it is changed
white-space:pre; Same as method one, the text is output as is displayed. When text exceeds the text field, it does not wrap and a scroll bar is generated.
white-space:pre-wrap; Spaces and blank lines are preserved, but text wraps automatically when it exceeds the text field.
white-space:pre-line; Consecutive spaces appear as one space, but keep consecutive blank rows.